IE9 проблемы с jQuery load () событие не срабатывает

Question

Я пытаюсь предварительно загрузить пару изображений и хотел бы, чтобы моя страница была приостановлена ​​до тех пор, пока не будут загружены все изображения.Итак, что я делаю, это:

var numPics = $('#bg img').length;
var picsLoaded = 0;
$('#bg img').load(function(){
    picsLoaded++;
    if (picsLoaded == numPics){
        buildPage();
    }

});

Это прекрасно работает во всех браузерах, кроме (как вы уже догадались) IE.Каким-то образом Internet Explorer загрузит все изображения (я вижу, что они загружаются в dev-tools), но только случайным образом запустит событие load (каждое обновление даст мне новый номер, обычно это будет примерно дополовина изображений. Я пробовал разные версии jQuery (я изначально начал с 1.6.1), а также читал о подобных проблемах на этом сайте, но пока не смог найти никакого ответа.

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

Answer 1

Попробуйте переназначить источник изображения, чтобы вызвать событие:

var numPics = $('#bg img').length;
var picsLoaded = 0;
$('#bg img').each(function(index) {
    var img = $(this);
    img.load(function(){
        picsLoaded++;
        if (picsLoaded == numPics){
            buildPage();
        }
    });
    img.attr("src", img.attr("src"));
});

Answer 2

Начиная с jQuery 1.8, $ .load () устарела (http://bugs.jquery.com/ticket/11733) в пользу:

image.bind('load', function() {});

Также интересен комментарий Пучу. Однако $ .browser устарел и использует сниффинг UA. Этот фрагмент должен помочь: https://gist.github.com/527683 (см. Обнаружение Javascript IE, почему бы не использовать простые условные комментарии? ).

РЕДАКТИРОВАТЬ: эта ошибка сохраняется в IE 10. Кроме того фрагмент кода, который я тоже связал, не обнаруживает IE 10, но там есть комментарии для обходных путей.

Answer 3

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

$("img").load(function() {alert("loaded!"}).attr("src", imgSource);

Answer 4

+ к ответу: не запускайте это в Firefox 3.6:

img.attr("src", img.attr("src"));

Некоторое количество изображений не будет загружено! Я предпочитаю:

if($.browser.msie && parseInt($.browser.version, 10) >= 9) {
    img_load.attr("src", img_load.attr("src"));
}