Using image.complete to find if image is cached on chrome?

Question

I have been trying to find out if an external image is cached on the browser with js, this is the code I have so far:

<html>
    <head></head>
    <body>

    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

    <script>

        function cached( url ) {
            $("#imgx").attr({"src":url});
            if(document.getElementById("imgx").complete) {
                return true;
            } else {
                if( document.getElementById("imgx").width > 0 ) return true;
            }

            return false;
        }

    </script>

    <img id="imgx" src=""  />

    <script>

        $(document).ready(function(){
            alert(cached("http://www.google.com/images/srpr/nav_logo80.png"));
        });

    </script>

    </body>
</html>

It works perfectly on firefox but it always returns false on chrome.

Does someone has any idea how to make it work with chrome?

W3C standard doesn't have any such API, so chance are you will be using some browser specific hacks which is not a good thing to do — Ankur, Oct 21 '11 at 04:34
Also even if the image is cached, loading the image is still most likely asynchronous, and it's unlikely the browser has finished loading and displaying the image before it executes the next JavaScript line. — RoToRa, Oct 21 '11 at 07:39
related http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript — Adrien Be, Oct 15 '14 at 08:02

score 14 · Accepted Answer · edited May 23 '17 at 12:25

14

I've rewritten your code in plain JavaScript, to make it more independent on jQuery. The core functionality hasn't changed. Fiddle: http://jsfiddle.net/EmjQG/2/

function cached(url){
    var test = document.createElement("img");
    test.src = url;
    return test.complete || test.width+test.height > 0;
}
var base_url = "http://www.google.com/images/srpr/nav_logo80.png"
alert("Expected: true or false\n" +
      cached(base_url)
      + "\n\nExpected: false (cache-busting enabled)\n" +
      cached(base_url + "?" + new Date().getTime()));
//false = not cached, true = cached

The first time, I get false and false. After I run the code again, I get true and false.

^{Using .complete and .height + .width gives the expected results (FF 3.6.23, Chromium 14).

It's very likely that you've disabled the caching at your Chrome browser. If not, check the HTTP headers of your served image (Is Cache-control present?). This header exist at the Google sample
If you want to detect when an image has (not) finished loading, have a look at this question.}

edited May 23 '17 at 12:25

Community

1
1

answered Oct 21 '11 at 09:19

Rob W

315,396
71
752
644

I've cache enabled and Cache-control is not present. What I want to know if to know if the image load instantly (from cache) or it loads progressively. The code I posted works fine on FF but it never works on chrome. – user979390 Oct 21 '11 at 13:39
@user979390 I have included a working test case. See http://jsfiddle.net/EmjQG/2/. – Rob W Oct 21 '11 at 13:58
Does that returns "true - false" on chrome too? for me it always returns false - false on chrome, I guess the best cross browser solution will be to setup a counter for timing the image load. – user979390 Oct 22 '11 at 00:30
@user979390 It returns `false, false`, then `true, false` (Chromium 14). Watch the network feature of the Developer console to confirm that the image is cached. – Rob W Oct 22 '11 at 08:00
1

Hmm... all that said, for some reason, I can't get this to work in Chromium *or* Firefox presently. In Firefox it always returns false, and on Chromium it always returns false on the first load in a new tab - even if I can clearly see in the network tab that the response was served from the cache without revalidation - and thereafter returns true. It seems like this answer no longer functions. – Mark Amery Dec 21 '14 at 16:46

Using image.complete to find if image is cached on chrome?

1 Answers1

Linked

Related