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 cache

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

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.

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 cache

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

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.

• javascript
• jquery
• caching

• Possible duplicate of Using image.plete to find if image is cached on chrome? – Ori Drori Commented Oct 8, 2015 at 8:03

3 Answers 3

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

For example:

$('.images_to_load').each(function(index, elem)
{
    if (!elem.plete) {
        $(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.

With vanilla JS

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

if (image.plete) {
  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.

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();