Post-loading : check if an image is in the browser cache

Posted by Mathieu on Stack Overflow See other posts from Stack Overflow or by Mathieu
Published on 2010-03-15T11:36:21Z Indexed on 2010/03/15 11:39 UTC
Read the original article Hit count: 374

Filed under:
|
|

Short version question : Is there navigator.mozIsLocallyAvailable equivalent function that works on all browsers, or an alternative?

Long version :)

Hi, Here is my situation : I want to implement an HtmlHelper extension for asp.net MVC that handle image post-loading easily (using jQuery).

So i render the page with empty image sources with the source specified in the "alt" attribute. I insert image sources after the "window.onload" event, and it works great.

I did something like this :

$(window).bind('load', function() {
    var plImages = $(".postLoad");
    plImages.each(function() {
        $(this).attr("src", $(this).attr("alt"));
    });
});

The problem is : After the first loading, post-loaded images are cached. But if the page takes 10 seconds to load, the cached post-loaded images will be displayed after this 10 seconds.

So i think to specify image sources on the "document.ready" event if the image is cached to display them immediatly.

I found this function : navigator.mozIsLocallyAvailable to check if an image is in the cache. Here is what I've done with jquery :

//specify cached image sources on dom ready
$(document).ready(function() {
    var plImages = $(".postLoad");
    plImages.each(function() {
        var source = $(this).attr("alt")
        var disponible = navigator.mozIsLocallyAvailable(source, true);
        if (disponible)
            $(this).attr("src", source);
    });
});

//specify uncached image sources after page loading
$(window).bind('load', function() {
        var plImages = $(".postLoad");
        plImages.each(function() {
        if ($(this).attr("src") == "")
            $(this).attr("src", $(this).attr("alt"));
    });
});

It works on Mozilla's DOM but it doesn't works on any other one. I tried navigator.isLocallyAvailable : same result.

Is there any alternative?

© Stack Overflow or respective owner

Related posts about lazy-loading

Related posts about cache