Javascript 延迟映像并加载替换

我有一个JS函数，一旦加载页面，就可以通过下面的数据src将资产从透明gif交换到完整图像

<img src="1x1.gif" data-src="full-photo.png" class="asset" /> // My image

window.addEventListener('load', function() {
    defer_images();

    function defer_images() {
        var loadedImages = 0;
        var imgDefer = document.getElementsByClassName('asset');

        for (var i = 0; i < imgDefer.length; i++) {
            if (imgDefer[i].getAttribute('data-src')) {
                imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));

                var iWidth = imgDefer[i].naturalWidth; // Check image exists

                if (iWidth) { 
                    loadedImages++; 
                } else {
                    console.log("Image missing: "+imgDefer[i].getAttribute('data-src'));
                }
            }

            // all images exist and have been replaced

            if (imgDefer.length === loadedImages) {
                doThings();
            }
        }
    }
});

//我的图像
addEventListener（'load'，function（））{
延迟图像（）；
函数defer_images（）{
var loadedImages=0；
var imgDefer=document.getElementsByClassName（'asset'）；
对于（var i=0；i

这在缓存页面上似乎可以正常工作。但是如果我重新加载页面并切换选项卡，代码将不会完成，因为LoadeImage++从未启动过

我不能使用setInterval或setTimeout重新检查，因为此代码用于双击

---

非常感谢您的帮助。

您可以使用

onload

事件检测到图像已加载，而使用

onerror

加载失败

for (var i = 0; i < imgDefer.length; i++) {
    var img = imgDefer[i];
    if (img.getAttribute('data-src')) {
        img.addEventListener("load", function() {
            loadedImages++;
        });
        img.addEventListener("error", function() {
            console.log("Image missing: "+ this.getAttribute("data-src"))
        });
        img.src = img.getAttribute('data-src');
    }
}

---

然后你可以使用

Then（）

和

catch（）

啊，非常感谢。我有一种感觉，循环太快了，之后所有东西都被加载了。我从未使用过then（）和catch（），但def将对此进行研究。非常感谢。

function loadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener("load", () => resolve(img));
    img.addEventListener("error", err => reject(err));
    img.src = src;
    // append to the dom or replace here
  });
};