Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
70
rated 0 times [  73] [ 3]  / answers: 1 / hits: 23328  / 15 Years ago, mon, march 15, 2010, 12:00:00

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?


More From » jquery

 Answers
86

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

[#97336] Thursday, March 11, 2010, 15 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
calicinthias

Total Points: 447
Total Questions: 101
Total Answers: 118

Location: Botswana
Member since Sat, Dec 31, 2022
1 Year ago
calicinthias questions
Sun, Jan 2, 22, 00:00, 2 Years ago
Wed, Jan 13, 21, 00:00, 3 Years ago
Mon, Aug 10, 20, 00:00, 4 Years ago
;