Метод
Just onload в for loop не решает эту задачу, поскольку метод onload выполняется асинхронно в цикле.Так что большие изображения в середине цикла могут быть пропущены в случае, если у вас есть какой-то обратный вызов только для последнего изображения в цикле.
Вы можете использовать Async Await, чтобы связать цикл для отслеживания загрузки изображениясинхронно.
function loadEachImage(value) {
return new Promise((resolve) => {
var thumb_img = new Image();
thumb_img.src = value;
thumb_img.onload = function () {
console.log(value);
resolve(value); // Can be image width or height values here
}
});
}
function loadImages() {
let i;
let promises = [];
$('.article-thumb img').each(function(i) {
promises.push(loadEachImage( $(this).attr('src') ));
});
Promise.all(promises)
.then((results) => {
console.log("images loaded:", results); // As a `results` you can get values of all images and process it
})
.catch((e) => {
// Handle errors here
});
}
loadImages();
Но недостаток этого метода в том, что он увеличивает время загрузки, поскольку все изображения загружаются синхронно.
Также вы можете использовать простой for loop и запускать обратный вызов после каждой итерации для обновления / обработки последнего загруженного значения изображения.Чтобы вам не приходилось ждать, когда меньшие изображения загружаются только после самого большого.
var article_thumb_h = [];
var article_thumb_min_h = 0;
$('.article-thumb img').each(function(i) {
var thumb_img = new Image();
thumb_img.src = $(this).attr('src');
thumb_img.onload = function () {
article_thumb_h.push( this.height ); // Push height of image whatever is loaded
article_thumb_min_h = Math.min.apply(null, article_thumb_h); // Get min height from array
$('.article-thumb img').height( article_thumb_min_h ); // Update height for all images asynchronously
}
});
Или просто используйте этот подход , чтобы сделать обратный вызов после загрузки всех изображений.
Все зависит от того, что вы хотите сделать.Надеюсь, это кому-нибудь поможет.