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

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"));     }); });