Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
513 views
in Technique[技术] by (71.8m points)

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

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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
" +
      cached(base_url)
      + "

Expected: false (cache-busting enabled)
" +
      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.

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...