Question

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?

Answer 1

after some reseach, I found a solution :

The idea is to log the cached images, binding a log function on the images ‘load’ event.
I first thought to store sources in a cookie, but it’s not reliable if the cache is cleared without the cookie. Moreover, it adds one more cookie to HTTP requests…

Then i met the magic : window.localStorage (details)

The localStorage attribute provides
persistent storage areas for domains

Exactly what i wanted :). This attribute is standardized in HTML5, and it’s already works on nearly all recent browsers (FF, Opera, Safari, IE8, Chrome).

Here is the code (without handling window.localStorage non-compatible browsers):

var storage = window.localStorage;
if (!storage.cachedElements) {
    storage.cachedElements = "";
}

function logCache(source) {
    if (storage.cachedElements.indexOf(source, 0) < 0) {
        if (storage.cachedElements != "") 
            storage.cachedElements += ";";
        storage.cachedElements += source;
    }
}

function cached(source) {
    return (storage.cachedElements.indexOf(source, 0) >= 0);
}

var plImages;

//On DOM Ready
$(document).ready(function() {
    plImages = $(".postLoad");

    //log cached images
    plImages.bind('load', function() {
        logCache($(this).attr("src"));
    });

    //display cached images
    plImages.each(function() {
        var source = $(this).attr("alt")
        if (cached(source))
            $(this).attr("src", source);
    });
});

//After page loading
$(window).bind('load', function() {
    //display uncached images
    plImages.each(function() {
        if ($(this).attr("src") == "")
            $(this).attr("src", $(this).attr("alt"));
    });
});