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

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

An ajax request for the image would return almost immediately if it is cached. Then use setTimeout to determine if its not ready and cancel the request so you can requeue it for later.

Update:

var lqueue = [];$(function() {  var t,ac=0;  (t = $("img")).each(    function(i,e)    {      var rq = $.ajax(      {        cache: true,        type: "GET",        async:true,        url:e.alt,        success: function() { var rq3=rq; if (rq3.readyState==4) { e.src=e.alt; } },        error: function() { e.src=e.alt; }      });      setTimeout(function()      {        var k=i,e2=e,r2=rq;        if (r2.readyState != 4)        {          r2.abort();          lqueue.push(e2);        }        if (t.length==(++ac)) loadRequeue();      }, 0);    }  );});function loadRequeue(){  for(var j = 0; j < lqueue.length; j++) lqueue[j].src=lqueue[j].alt;}

The most efficient, simple, and widely supported way to check if an image has already been cached is to do the following...

1. Create an image object
2. Set the src property to the desired url
3. Check the completed attribute immediately to see if the image is already cached
4. Set the src attribute back to "" (empty string), so that the image is not unnecessarily loaded (unless of coarse you want to load it at this time)

Like so...

function isCached(src) {    var img = new Image();    img.src = src;    var complete = img.complete;    img.src = "";    return complete;}