Check if the image is loaded from cache or not

Question

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.

Answer 1

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.

Answer 2

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.