jquery .one() события загрузки и ошибки не работают

У меня есть простой HTML, который я хочу, чтобы событие инициировалось после загрузки последнего изображения, или если есть ошибка на последнем загружаемом изображении. вот мой код

HTML

<div id="compare-table-scrollable">
    <img src="www.bla.com/1.png" />
    <img src="www.bla.com/2.png" />
    <img src="www.bla.com/3.png" />
</div>

Jquery

var imageCount = $('#compare-table-scrollable img').length;
var counterIMG = 0;
$('#compare-table-scrollable img').one("load error",function(){
           counterIMG++;
           if (counterIMG == imageCount)  // do stuff when all have loaded
           {
                alert(counterIMG);
           }
});

вот моя скрипка

Источник

2 ответа

Решение

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

function onImagesLoaded($container, callback) {
    var $images = $container.find("img");
    var imgCount = $images.length;
    if (!imgCount) {
        callback();
    } else {
        $("img", $container).each(function () {
            $(this).one("load error", function () {
                imgCount--;
                if (imgCount == 0) {
                    callback();
                }
            });
            if (this.complete) $(this).load();
        });
    }
}

И как это использовать...

onImagesLoaded($("#compare-table-scrollable"), function() {
    alert("images loaded");
});

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

Источник

Вы не перехватываете события до тех пор, пока в процессе загрузки страницы не будет слишком поздно, после того, как события уже запущены. Обратите внимание на второй выпадающий список в верхней левой части jsFiddle, который говорит "onload". Это чрезвычайно удивительное значение по умолчанию для jsFiddle, заключающееся в переносе кода JavaScript в windowload обработчик события. Этот обработчик не запускается, пока все изображения не загрузятся или не загрузятся.

Если вы измените этот раскрывающийся no wrap - <body>, вы получите предупреждение: http://jsfiddle.net/X4AmG/3/

Тем не менее, с изображениями, указанными в разметке, я буду беспокоиться о load или же error событие запускается до того, как ваш код подключит свои обработчики. По этой причине я бы, вероятно, сделал что-то вроде этого:

// Get the images
var imgs = $('#compare-table-scrollable img');

// Schedule the first check for DOM ready
$(checkForImagesDone);

// Our check function
function checkForImagesDone()
{
  var counter = 0;
  imgs.each(function()
  {
    if (this.complete)
    {
      ++counter;
    }
  });
  if (counter === imgs.length)
  {
    alert("All complete");
  }
  else
  {
    setTimeout(checkForImagesDone, 50); // 50ms
  }
}
Источник
Другие вопросы по тегам