Блог

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

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

 $(.container img).each(function () {
        $(this).attr("src", $(this).data("src"));
        $(this).on('load', function () {
            $(this).addClass("modal-imgs-in");
        });
    });
 

Вот как я загружаю изображения, и все работает нормально.

Заранее спасибо (:

Вы можете использовать Promises , в частности Promise.all , для постановки задачи в очередь, когда выполняется несколько других действий.

 Promise.all([...document.querySelectorAll(".container img")].map(
  img => new Promise((resolve,reject) => {
    img.src = img.getAttribute("data-src");
    img.onload = ()=>resolve(img);
    img.onerror = ()=>reject(img);
  })
)).then(imgs => {
  console.log("Images loaded: ", imgs);
}).catch(img => {
  console.error("Failed to load: ", img);
});
 

Это заменяет jQuery на ванильный JS (который, следовательно, будет намного более производительным), получая соответствующие изображения и сопоставляя их с обещанием, которое будет разрешено при загрузке изображения или отклонено, если оно не загружается.

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