D'attente pour le chargement des images avec JQuery

J'ai essayer d'attendre pour les images fini de charger, mais il semble que l'événement load est jamais égalés.

Voici mon code :

$(function() {
var arrowWidth = 22;
var currentImageID = -1;
var imageOffsets = new Array();
var loadedImages = 0;
var numberOfImages = $("div#sliderGallery > ul > li").size();
$("div#sliderGallery > ul").hide();
$("div#sliderGallery").append("<div id=\"loading\"></div>");
$("div#sliderGallery > div#loading").append("Chargement en cours ...<br>");
$("div#sliderGallery > div#loading").append("<img src=\"progressbar.gif\" />");
function setOffset(imageID) {
if (imageID != currentImageID) {
$("ul#slide_items > li > img#"+currentImageID).fadeTo(0, 0.2); 
currentImageID = imageID;
$("ul#slide_items > li > img#"+currentImageID).fadeTo("slow", 1);
$("div#sliderGallery > ul").css("left", imageOffsets[imageID][0]+"px");
$("div#slideGallery > span.arrow").css("width", imageOffsets[imageID][1]+"px"); 
$("div#sliderGallery > span#left").css("left", imageOffsets[imageID][2]+"px");
$("div#sliderGallery > span#right").css("left", imageOffsets[imageID][3]+"px");
}
}
$("div#sliderGallery > ul > li > img").load(function() {
alert("never executed ...");
loadedImages++;
if (loadedImages == numberOfImages) {
$("div#sliderGallery > div#loading").remove();
$("div#sliderGallery").css("overflow", "hidden");
$("div#sliderGallery > ul").show();
$("div#sliderGallery").append("<span id=\"left\" class=\"arrow\"><img src=\"arrow_left.png\" /></span>");
$("div#sliderGallery").append("<span id=\"right\" class=\"arrow\"><img src=\"arrow_right.png\" /></span>");
$("div#slideGallery > span.arrow").fadeTo(0, 0.5);
$("div#slideGallery > span.arrow").css("padding-top", Math.round((600-146)/2)+"px"); 
var ulWidth = $("div#sliderGallery").innerWidth();
var imageID = 0;
var imageWidthSum = 0;
$("div#sliderGallery > ul > li > img").each(function() {
image = jQuery(this);
image.attr("id", imageID);
image.fadeTo(0, 0.2);
imageOffsets[imageID] = new Array();
//Offset applied to images 
imageOffsets[imageID][0] = Math.round(ulWidth/2-(imageWidthSum+image.innerWidth()/2));
//Width applied to span
imageOffsets[imageID][1] = Math.round(image.innerWidth()/2+arrowWidth);
//Offset apply to the left span
imageOffsets[imageID][2] = Math.round($("div#sliderGallery").offset().left+ulWidth/2-imageOffsets[imageID][1]);
//Offset apply to the right span
imageOffsets[imageID][3] = imageOffsets[imageID][1]+imageOffsets[imageID][2];
imageID++;
imageWidthSum += image.innerWidth();
});
setOffset(0);
}
});

});

Et le code html :
texte du lien

Pourquoi cette ligne d'alerte "("ne jamais exécuté ...");" n'a pas été exécuté ?

Merci d'avance, je suis en train de devenir folle avec ce problème 🙂

OriginalL'auteur Fabien Engels | 2009-07-08