8

I have a task. I have a server call to get list of images. Along with other information I have to add this information that weather it was loaded from cache or from server.

Is there a way that I can check the headers in the api call? If it is from cache I get status code 200 but I get extra information like this (from cache). If it is not from cache I only get status code 200.

Image 1 is for the those which is not loaded from cacheenter image description here

The next image is for those which are loaded from cache.enter image description here

I have got that the answer has been already given or it is duplicate. I have tried that solution and it doesn't seem to work. Also it is chrome specific, I am looking for something more general that should work in all browsers. I hope this explains why I didn't went for that solution. I have searched it before asking here.

Looking forward for responses.

Community
  • 1
  • 1
mohsinali1317
  • 4,255
  • 9
  • 46
  • 85
  • Possible duplicate of [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) – Ori Drori Oct 08 '15 at 08:03

3 Answers3

5

You will have to handle your load bindings selectively. You can verify load by testing the Image object property complete.

For example:

$('.images_to_load').each(function(index, elem)
{
    if (!elem.complete) {
        $(elem).on('load', function(){
            console.log('image loaded from server');
        });
    }
    else {
        console.log('image loaded from cache');
    }
});

How to use this code: It is important that you have image tags (without the src attribute) with class images_to_load on your page when executing above code. After adding the src attribute (the url) you will be able to find out if an image has been loaded from cache or not.

Thariama
  • 50,002
  • 13
  • 138
  • 166
  • Using `.complete` isn't necessary though? Just wait for the onload event, which would be `$(elem).on('load', function {});` these days. Or even `$(this).on()` here. – Shikkediel Oct 08 '15 at 08:09
  • @Shikkediel can you elaborate a bit more here please? Maybe a code spinet or JSFiddle? – mohsinali1317 Oct 08 '15 at 08:10
  • 2
    @Shikkediel the issue is that `load()` doesn't always fire when the image is pulled from cache in certain browsers. – Rory McCrossan Oct 08 '15 at 08:13
  • This answer has the same basic idea I had as well in any case, just doubted if `.complete` was necessary but I see how it might be to make a distinction. The image onload event is indeed not very reliable, I even believe it is officially a non existing one. But I am yet to meet a browser that doesn't implement it. – Shikkediel Oct 08 '15 at 08:16
  • @susheel: that depends on the time when you call this code snippet. it will work if you have the image elements in your dom (without a src attribute), then execute this code and assign them a src attribute – Thariama Oct 08 '15 at 08:21
  • @Thariama But the OP's requirement seems to be images with src attribute. – Susheel Singh Oct 08 '15 at 08:24
  • @susheel: this is not defined. he can give them the src attribute later on – Thariama Oct 08 '15 at 08:25
  • Hold on... it didn't read this correctly before : *the issue is that `load()` doesn't always fire when the image is pulled from cache*. Actually, it shouldn't fire at all! That's the whole point here. – Shikkediel Oct 08 '15 at 08:26
  • 1
    http://jsfiddle.net/xr3ya79w/1/ dynamically adding src is working. Is there a way for with src attribute? – Susheel Singh Oct 08 '15 at 08:33
  • 1
    I like it, works on all major Windows browsers and can't see why not on Mac. Should get more upvotes. – Shikkediel Oct 08 '15 at 08:44
  • So this solution means, I would have to loop over the result I get from server to store the urls in the image array and create img tags. And then loop over the image array and see which is loaded from cache and which is not? – mohsinali1317 Oct 08 '15 at 08:52
1

With vanilla JS

const image = document.querySelector('.my-image-class');

if (image.complete) {
  image.addEventListener('load', () => {
    // Do stuff when image wasn't loaded from cache
  });
} else {
  // Do stuff when image has been loaded trough cache
}

Don't forget to remove the event listener when it isn't needed anymore.

Eertmanhidde
  • 32
  • 3
0

If maybe somebody is still after this, I check Connection response header where it doesn't exist if it's loaded from cache.

let     request = new XMLHttpRequest();

request.onload = function( response )
{
//Image was loaded -> wait for some time and then load the next one.
//
//Notice:
//When image will be loaded from the server it will contain the 'connection' header where if it's loaded from cache it doesn't.
    window.setTimeout(
        function Timeout()
        {
        //Load next one.
            callback_finished();
        },
        ( request.getResponseHeader( 'Connection' ) === null ) ? TIMEOUT_SHORT : TIMEOUT_LONG
    );
};

request.open( "GET", url, true );
request.send();
Waldemar
  • 171
  • 9