Некоторые приложения, которые много работают с изображениями, будут представлять разработчику общеизвестную проблему, как узнать одновременно, когда в браузер загружены как минимум 2 изображения. Каждое изображение в DOM можно манипулировать с помощью JavaScript, и довольно легко узнать, был ли образ успешно загружен или нет. Однако нет такого способа по умолчанию, чтобы узнать, когда группа изображений была загружена. Поскольку способ загрузки ваших изображений может быть не фоновым, а непосредственно в представлении, или вы работаете непосредственно с объектами DOM, не существует универсальной функции, которая может сделать это автоматически за вас, однако вы можете научиться использовать очень простой прием Многие разработчики знают, были ли изображения успешно загружены или нет.
Как работает правильный подход?
Теоретически, чтобы проверить, когда загружаются все изображения, вам потребуется переменная flag, которая работает как счетчик. Этот счетчик будет увеличиваться каждый раз, когда IMG будет успешно загружен или нет, и каким-то образом нужно запускать другую функцию каждый раз, когда это происходит, поэтому ваш обратный вызов будет выполнен «да» или «да», когда процесс завершится. Эта функция проверяет, равно ли значение счетчика количеству изображений, которые вы хотите загрузить, и когда это происходит, выполняется обратный вызов. Ваш обратный вызов получит в качестве первого аргумента изображения, которые не были загружены:
// Create the flag variables (counter and total of images)
var Counter = 0;
var TotalImages = 2;
// Create an instance of your images
var Image1 = new Image();
var Image2 = new Image();
// Store the images that were not correctly loaded inside an array to show later
var notLoadedImages = [];
// The onload callback is triggered everytime an image is loaded
var onloadCallback = function(){
// Increment the counter
Counter++;
// Verify if the counter is less than the number of images
if(Counter < TotalImages){
return;
}
// Trigger the final callback if is the last img
allLoadedCallback();
};
// The onerror callback is triggered everytime an image couldn't be loaded
var onerrorCallback = function(){
// Increment the counter
Counter++;
// Add the current image to the list of not loaded images
notLoadedImages.push(this);
// Verify if the counter is less than the number of images
if(Counter < TotalImages){
return;
}
// Trigger the final callback if is the last img
allLoadedCallback();
};
// The callback that is executed when all the images have been loaded or not
var allLoadedCallback = function(){
console.log("Atention, the following images were not loaded ", notLoadedImages);
};
// Attach onload callbacks
Image1.onload = onloadCallback;
Image2.onload = onloadCallback;
// Attach onerror callbacks
Image1.onerror = onerrorCallback;
Image2.onerror = onerrorCallback;
// Load the images !
Image1.src = "queso.png";
Image2.src = "image.jpg";Обратите внимание, что allLoadedCallback выполняется только один раз. Очевидно, что код является лишь примером того, как работает логика, поэтому вы можете обернуть его и заставить работать с более чем двумя изображениями. Следующий шаг показывает простую функцию, которая позволяет загружать несколько изображений с помощью одной функции и выполнять один обратный вызов, который уведомляет, какие изображения были загружены или нет.
Успешная и ошибочная реализация
Следующие ImageLoader Метод работает следующим образом: вам нужно предоставить в качестве первого аргумента массив с URL-адресами изображений, которые вы хотите загрузить. Внутренне функция будет загружать его, используя класс Image, и перебирать каждый заданный URL-адрес изображения. Внутренний счетчик увеличивается, как указано в базовой логике, когда изображение загружается или нет, и сохраняется внутри объекта, который будет возвращен позже в onAllLoaded Перезвоните:
Заметка
Поскольку браузер загружает изображение, вам не нужно беспокоиться о производительности загрузки, так как изображение будет надежно кэшировано и впоследствии может быть использовано для их рендеринга.
/**
* Loader function that helps to trigger a callback when multiple images has been loaded. Besides
* indicates which images were correctly/wrong loaded.
*
* @param {Array} Images An array of strings with the paths to the images.
* @param {Function} Callback Callback function executed when all images has been loaded or not.
*/
function ImageLoader(Images, Callback){
// Keep the count of the verified images
var allLoaded = 0;
// The object that will be returned in the callback
var _log = {
success: [],
error: []
};
// Executed everytime an img is successfully or wrong loaded
var verifier = function(){
allLoaded++;
// triggers the end callback when all images has been tested
if(allLoaded == Images.length){
Callback.call(undefined, _log);
}
};
// Loop through all the images URLs
for (var index = 0; index < Images.length; index++) {
// Prevent that index has the same value by wrapping it inside an anonymous fn
(function(i){
// Image path providen in the array e.g image.png
var imgSource = Images[i];
var img = new Image();
img.addEventListener("load", function(){
_log.success.push(imgSource);
verifier();
}, false);
img.addEventListener("error", function(){
_log.error.push(imgSource);
verifier();
}, false);
img.src = imgSource;
})(index);
}
}Тогда это можно использовать так:
ImageLoader(["example.png", "example.jpg", "http://i.imgur.com/fHyEMsl.jpg"], function(result){
if(result.error){
// outputs: ["example.png", "example.jpg"]
console.log("The following images couldn't be properly loaded: ", result.error);
}
// outputs: ["http://i.imgur.com/fHyEMsl.jpg"]
console.log("The following images were succesfully loaded: ", result.success);
});Преимущество этого подхода заключается в том, что вы будете знать, какие изображения были загружены или нет. Обратите внимание, что с помощью этой функции вы сможете проверять строки на пути к изображениям, так как экземпляры Image не будут работать (как уже выбранный элемент img DOM, так как обратный вызов onload не будет запущен).
