Блог

Я пишу веб-приложение, которое должно динамически загружать много изображений.
Я написал служебную функцию loadMultipleImages, которая заботится о их загрузке и вызове (возможно, необязательных) обратных вызовов всякий раз, когда:

• загружается одно изображение
• обнаружена ошибка (не удается загрузить одно изображение)
• все изображения загружаются без ошибок

Я вызываю его следующим образом (вы можете найти полный пример здесь):

 var imageResources = [];
        var mulArgs = {multipleImages: [],
                        onComplete: this.afterLoading.bind(MYAPP),
                        onError: this.logError.bind(MYAPP)
        }

imageResources = ["imageA_1.png", "imageA_2.png"];
mulArgs.multipleImages.push ({ID: "imageA_loader", imageNames : imageResources});
        
imageResources = ["imageB_1.png", "imageB_2.png"];
mulArgs.multipleImages.push ({ID: "imageB_loader", imageNames : imageResources});

 //Lots of more images 

 var mImageLoader = new loadMultipleImages (mulArgs);
  

Как только я создаю свой loadMultipleImages объект, он загружает изображения и вызывает afterLoading() функцию после того, как все они загружены (или logError() если есть какая-то проблема). Затем я могу получить доступ к изображениям с помощью:

 MYAPP.afterLoading = function (loaders) {
    // Just an example
    var imageA_array = loaders["imageA_loader"].images;
    var imageB_first = loaders["imageB_loader"].images[0];
 }
  

Кстати, я думаю, что я изобретаю (возможно, квадратное) колесо. Есть ли легкая, простая библиотека, которая делает это лучше, чем я делаю? Или просто лучший метод, который избавляет меня от необходимости поддерживать loadMultipleImages код?

http://jsfromhell.com/classes/preloader