how to check if an image was cached in js? [duplic

Question

This question already has answers here:

Post-loading : check if an image is in the browser cache (6 answers)

Closed 6 years ago.

when I joined an interview , I was asked the question, I didn't know how to answer it .

do you know the key point of the question?

Answer 1

you could check like:

function is_cached(img_url){
    var imgEle = document.createElement("img");
    imgEle.src = img_url;
    return imgEle.complete || (imgEle.width+imgEle.height) > 0;
}

//and check, returns true or false depending on cached or not
is_cached("http://www.somesite.com/some_image.jpg");

Answer 2

Check if the complete attribute of the Image object is true:

function is_cached(src) {
    var image = new Image();
    image.src = src;

    return image.complete;
}

It seems to work (although it'll load the image if it isn't in the cache, which might not be what you want):

> is_cached('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3')
false
> is_cached('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3')
true