Oczekiwanie na załadowanie zdjęć za pomocą JQuery

Próbuję czekać na załadowanie obrazów, ale wydaje się, że zdarzenie ładowania nigdy nie jest dopasowane.

Oto mój kod:

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

});

I kod HTML:tekst linku

Dlaczego ta linia „ostrzega („ nigdy nie wykonywana ... ”);” nie jest wykonywany?

Z góry dziękuję, będę szalony z tym problemem :)

questionAnswers(5)

yourAnswerToTheQuestion