Почему эта попытка предварительной загрузки изображений с помощью jQuery не работает?

Текущий у меня есть этот код:

var imgCount = 36;
var container = $('#3D-spin');

var loaded = 0;
function onLoad()
{
    alert(loaded);
    loaded++;
    if(loaded >= imgCount)
    {
        alert('yay');
    }
}

for(var i = imgCount-1; i >= 0; i--)
{
    container.prepend(
        $('<img>')
            .one('load', onLoad)
            .attr('alt', 'View from '+(i*360/imgCount)+'\u00B0')
            .attr('src', '/images/3d-spin/robot ('+i+').jpg')
    );
}

Однако он ведет себя ОЧЕНЬ странно. Обычно я получаю нет предупреждений. Однако, если я открою инструменты разработчика и приостановлю выполнение скрипта, я получу одно предупреждение с надписью 0. Нет ничего лучше старого доброго гейзенбага!

Живой пример можно найти здесь. Сам скрипт называется style.js, и видно, что изображения загрузились.

Я что-то делаю глупо, или jQuery играет?


jquery image-preloader
person Eric    schedule 17.06.2010    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Если изображения были кэшированы браузером, есть шанс, что событие onload не сработает. Что вы можете сделать, так это вручную запустить событие загрузки для изображений, у которых установлено свойство complete:

container.prepend(
    $('<img>')
        .one('load', onLoad)
        .attr('alt', 'View from '+(i*360/imgCount)+'\u00B0')
        .attr('src', '/images/3d-spin/robot ('+i+').jpg')
        .each(function() { if(this.complete) $(this).trigger("load"); }
    );
person karim79    schedule 17.06.2010
comment
+1 ты мой герой. Я стыжусь того, что не знал о .complete. Отличный ответ @ karim79! - person Doug Neiner; 17.06.2010