JQuery: Как проверить, когда все изображения в массиве загружены? - PullRequest
Новая
       34

JQuery: Как проверить, когда все изображения в массиве загружены?

1 голос
/ 16 сентября 2011

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

Я пробовал это, но это не работает: 

myImgArray.load(function(){
    alert('loaded');
});

Я получаю

33: Uncaught TypeError: Object [object Object], [object Object], [объект Object], [объект Object] не имеет метода 'load'

Я не думаю, что цикл for или что-то подобное будет работать, потому что изображения могут и, вероятно, будут загружаться в«случайный» порядок.

1 Ответ

13 голосов
/ 16 сентября 2011

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

Вот код, который делает это: 

var urls = [
    "http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg",
    "http://photos.smugmug.com/photos/344292111_SvSfK-Ti.jpg",
    "http://photos.smugmug.com/photos/344291168_nErcq-Ti.jpg"
];

var imgs = [];
var cnt = 0;

for (var i = 0; i < urls.length; i++) {
    var img = new Image();
    img.onload = function() {
        ++cnt;
        if (cnt >= urls.length) {
            // all images loaded here
        } else {
            // still more images to load
        }
    };
    img.src = urls[i];
    imgs.push(img);
}

Вы можете увидеть это в действии здесь: http://jsfiddle.net/jfriend00/7KF7V/

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

...