Кросс-браузерное решение для обратного вызова при загрузке нескольких изображений? - PullRequest
Новая
       10

Кросс-браузерное решение для обратного вызова при загрузке нескольких изображений?

4 голосов
/ 19 января 2012

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

var img = new Image();
img.src = "images/img.png";
if (!img.complete) {
    img.onload = function() {
        // code to be executed when the image loads
    }
}

Или простая проверка, чтобы увидеть, все ли изображения загружены с оператором «если». Кроме того, $ (window) .load (или onLoad или что-то еще) не работает.

В моем случае я загружаю два изображения: 

var img1 = new Image();
var img2 = new Image();
img1.src = 'images/img1.png';
img2.src = 'images/img2.png';

Как я могу определить обратный вызов, подобный тому, что был в первом примере, но он выполняется, когда ОБА образы закончили загрузку?

Спасибо, что уделили время.

Ответы [ 2 ]

11 голосов
/ 19 января 2012

Вот функция, которая будет создавать несколько изображений и вызывать обратный вызов, когда они все загружены: 

function createImages(srcs, fn) {
   var imgs = [], img;
   var remaining = srcs.length;
   for (var i = 0; i < srcs.length; i++) {
       img = new Image();
       imgs.push(img);
       img.onload = function() {
           --remaining;
           if (remaining == 0) {
               fn(srcs);
           }
       };
       img.src = srcs[i];
   }
   return(imgs);
}

var imgs = createImages(['images/img1.png', 'images/img2.png'], myCallback);

P.S. всякий раз, когда вы работаете с .onload для изображений, вы должны установить обработчик .onload перед установкой значения .src, потому что обработчик загрузки может сработать немедленно при установке значения .src, если изображение находится в кэше. Если вы сначала не установили обработчик загрузки, он может никогда не сработать, потому что к тому времени, когда вы установите обработчик, изображение уже загружено. Это происходит в некоторых браузерах. Просто всегда устанавливайте .onload перед .src, если вам нужно событие onload.

2 голосов
/ 19 января 2012

Это называется подсчетом ссылок. Это стандартная методика запуска одного обратного вызова после завершения n задач. 

var count = 2;
img1.onload = function () {
  count-- === 0 && callback();
}
img2.onload = function () {
  count-- === 0 && callback();
}

function callback() {

}
...