Ожидание загрузки изображений с помощью JQuery

Я пытаюсь дождаться окончания загрузки изображений, но кажется, что событие загрузки никогда не совпадает.

Вот мой код:

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

});

И HTML-код: текст ссылки

Почему эта строка & quot; предупреждение (& quot; никогда не выполняется ... & quot;); & quot; не выполняется?

Заранее спасибо, я схожу с ума от этой проблемы :)

 Patrick Desjardins08 июл. 2009 г., 17:28
Я получил окно предупреждения с FF3.5
 Fabien Engels08 июл. 2009 г., 19:46
То же самое с FF 3.0, но только в первый раз, когда я открываю страницу ... не в следующий раз ...

Ответы на вопрос(5)

документы:

Note: load will work only if you set it before the element has completely loaded, if you set it after that nothing will happen. This doesn't happen in $(document).ready(), which jQuery handles it to work as expected, also when setting it after the DOM has loaded.

Можете ли вы положить его в $ (документ) .ready ()?

 Fabien Engels08 июл. 2009 г., 20:44
Я изменяю первую строку на: $ (document) .ready (function () {Все еще не работает :(

который запускает обратные вызовы после завершения загрузки дочерних изображений. Вроде локализованоwindow.onload.

Это называетсяwaitForImages и использование ...

$('selector').waitForImages(function() {

    alert('All images are loaded.');

});

Прочти меня.

Он также может быть настроен наwait для изображений, на которые есть ссылки в CSS.

 14 июл. 2011 г., 00:49
Хорошая работа над плагином, работает очень хорошо и гораздо надежнее, чем встроенная функция загрузки, которая, похоже, имеет проблемы кросс-браузерной.

это не решение вашей проблемы, но я заметил, что вы ссылаетесь на div # slideGallery и div # sliderGallery. Это два отдельных div или это опечатка?

Я получаю окно с предупреждением IE 8

 Fabien Engels08 июл. 2009 г., 19:29
Это была ошибка опечатки, исправить сейчас, но это ничего не изменило. код предупреждения выполняется при первом открытии страницы, но при следующих посещениях код не выполняется ... Как только изображения кэшируются, событие загрузки больше не работает ...
 08 июл. 2009 г., 17:35
Я пошел на веб-сайт, и эта часть выполнила на моей стороне. Вы выбрали два отдельных элемента div: $ (& quot; div # sliderGallery & quot;). Append (& quot; & lt; span id = \ & quot; left \ & quot; class = \ & quot; стрелка \ & quot; & gt; & lt; img src = \ & quot ; arrow_left.png \ & quot; / & lt; / span & gt; "); $ (& quot; div # sliderGallery & quot;). append (& quot; & lt; span id = \ & quot; вправо \ & quot; стрелка \ & quot; & gt; & lt; img src = \ & quot; arrow_right.png \ & quot ; / & gt; / span & quot;); $ (& quot; div # slideGallery & gt; span.arrow & quot;). fadeTo (0, 0.5); $ (& quot; div # slideGallery & gt; span.arrow & quot;). css (& quot; padding-top & quot ;, Math.round ((600-146) / 2) + & quot; px & quot;); slideGallery и слайдерGallery

все ли изображения уже загружены (происходит на быстрых соединениях или загружены из кеша), сравнив numberOfImages с длиной $ (& quot; div # sliderGallery & gt; ul & gt; li & gt; img & quot;) сразу после регистрации обработчик нагрузки Большинство браузеров запускают событие, только если изображения закончили загрузку после регистрации обработчика, некоторые запускают его, даже если оно уже завершило загрузку ранее, но я не буду полагаться на это. Так как вы обычно делаете такие инициализации в $ (document) .ready (), вы попадаете в эту проблему еще чаще, потому что они, вероятно, имеют большое количество изображений, загруженных ранее.

По причинам параллелизма вы также можете добавить некоторый логический флаг для переключения и проверки, когда вы запускаете блок (лучше сделать его функцией), чтобы он выполнялся, если предварительная загрузка завершена, или вы можете выполнить этот блок несколько раз.

Также убедитесь, что вы не используете свой внутренний счетчикloadedImages, поскольку по указанным выше причинам он может никогда не подсчитаться до полного значения. Лучше каждый раз проверять длину $ (& quot; div # sliderGallery & ul & gt; li & gt; img & quot;).

Я не знаю, уместно ли это, но когда я закодировал предварительный загрузчик, я зарегистрировался в jQuery's $ (). Каждая функция использует .onload непосредственно для каждого изображения. Возможно, тогда была какая-то проблема, или я просто не знал $ (). Load. Вы можете попробовать, если это имеет какое-либо значение.

Решение Вопроса

В дополнение к обработчику события attach onload, для каждого изображения вы можете попробовать проверить атрибутcomplete равноtrue.

$("div#sliderGallery > ul > li > img").each( function() { 
    if ($(this)[0].complete) {
        // track image is loaded
    }
});

Это может работать и для кэшированных изображений.

Ваш ответ на вопрос