2

Our web-page contains a 360 angle product viewer based on 36 product images. Only one image is showed at a time, all other are hidden. All images are served from AWS S3 bucket with no cache directive (and that is how it should be). On the first start JS plugin shows preloader for 36 images and everything works perfect after loading.

Problem comes when the web tab (tested only in chrome) remains open for a long time (several hours) when user works in another tabs. Those hidden images are removing from the cache, and JS script reloads all of them again and 360 drug looks odd (not smooth). After browser loads all absent images it starts to work smooth again and after few hours of inactivity it repeats again.

This behaviour is what we expect, but we want somehow to check if hidden images are not cached anymore to invoke preloader.

I searched the web and stackoverflow for the answer, but all other cache related question are not answering my question, like "check if image is cached after reopening browser or cache". My question is: how to check if hidden image is still in cache?

Example code appreciated. Thanks!

PS - I know how to enable cache headers for images delivered from S3 and that is not an option.

PSS - Creating 1px image holders is not an option too.

Kainax
  • 1,431
  • 19
  • 29
  • 1
    Not sure it is exactly the solution you are looking for, but what if you invoke the preloader - no matter what? If the image is in the cache - everything is ok and no new connection to the server will be made, otherwise - the image will be available for the browser when needed. As for when exactly to run the preloader - i guess you can have a variable to save the `lastPreloadTime`, and if the user has any interaction with the page (mouseenter on document ?), check if (lets say) 10 minutes passed since last preloading, and run the preload again. – Dekel Aug 21 '16 at 13:58
  • Thanks for a suggestion, but that is not an option too. We thought about it already, but that is very complicated system, not just 36 images, but with many dynamically preloaded tiles (on zoom event etc), and user may switch to that tab only to check current (last) ajax-returned statistics and full reload may not be needed, so we prefer to interrupt user interface only if it is really necessary - like when we lost hidden images from the buffer. – Kainax Aug 21 '16 at 17:53
  • Not sure I understand your problem here. Lets say you have a magic function that gets as input a list of images (your hidden images) and return the sub-list of these image that are not in the cache anymore. Now - you are going to pre-load these images (using your preloader function). Why do you need this magic function to tell you if the images are cached? Just run the preloader again (on the hidden images) and you will get them from cache (or from the server). You know the hidden images, just preload them. – Dekel Aug 21 '16 at 23:26
  • Thanks again, but I'm not looking for a workaround, I have exact question stated. PS - We are using heavy external custom jQuery plugin that ships only in minified version and updates every month, so I don't want to mess with it's code 12 times a year. We requested couple of functions and callbacks, but for now looking for the answer on a SUBJECT. – Kainax Aug 22 '16 at 05:11
  • Did you try the technique given in [Using image.complete to find if image is cached on chrome](http://stackoverflow.com/questions/7844982/using-image-complete-to-find-if-image-is-cached-on-chrome)? – ConnorsFan Aug 23 '16 at 22:22

1 Answers1

1

As you mentioned in your comments - you don't want to mess with your preloader code and don't want to start your preloader each time.

The answer to your question is "no, there is no 100% crossbrowser way to tell if image is in the cache", however, you can guess it by measuring time, taken between load starts and ends.

So, you can add a quasi-preloader script on page, that tries to preload all of your hidden images, and, if the average time taken exceeds some threshold (say 100ms or something like that) per image - it starts your main preloader, so you avoid unnecessary page blocking / data loss on main preloader start.

As long as all your images are in cache - the quasi-preloader won't take too much resources to check all the images.

Some very "dirty" example of what should it look like:

    window.needsPreloadingFlag=false;

    window.onfocus = function () {
        if (!window.needsPreloadingFlag) {
            needsPreloadingFlag = quasiPreloader.checkHiddenImages();
        }
    };

    yourApp.onUserActionThatProbablyNeedsPreloading = function (){ 
    //that should be bound to events that require your hidden images
        if (window.needsPreloadingFlag) {
            yourApp.preloadImages();
        }
        //...
    }
haldagan
  • 911
  • 5
  • 16
  • For one week long bounty question, there are only 70 views and as the question is self explained I guess that most of people passing by as they don't know the answer. Looks like there is really no way to check if hidden image is still in browser's cache. I will use my own workaround, but as you are the one who answered direct question and my opinion is the same, I think it's fair that bounty goes to you. Good luck! – Kainax Aug 25 '16 at 07:26