javascript - 延迟图像和替换加载

Question

我有一个 JS 函数，一旦加载页面，通过下面的数据源将 Assets 从透明 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();
            }
        }
    }
});

这似乎在缓存页面上工作正常。但是，如果我重新加载页面并切换选项卡 - 代码不会完成，因为 loadedImages++ 从未被触发。

我无法使用 setInterval 或 setTimeout 重新检查，因为此代码用于 DoubleClick。

非常感谢任何帮助。

Answer 1

您可以使用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');
    }
}

非缓存失败的原因是加载图像需要时间，而且你的 for 循环很快。使用事件在加载图像时触发。

您可以 read more here .

注意:检测所有图像是否已加载可能需要使用 promises:

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
  });
};

然后就可以使用then()和catch()