Javascript - 在所有图像加载后执行

Question

看了别人的问题我觉得

window.onload=...

会回答我的问题。我试过这个，但它会在页面加载时立即执行代码(而不是在图像加载后)。

如果有任何区别，图像来自 CDN，并且不是相对的。

有人知道解决办法吗？ (我没有使用 jQuery)

Answer 1

想要一条线吗？

Promise.all(Array.from(document.images).filter(img => !img.complete).map(img => new Promise(resolve => { img.onload = img.onerror = resolve; }))).then(() => {
    console.log('images finished loading');
});

非常向后兼容，甚至可以在 Firefox 52 和 Chrome 49(Windows XP 时代)中使用。不过 IE11 不支持。

将 document.images 替换为例如document.querySelectorAll(...) 如果您想缩小图像列表。

为简洁起见，它使用onload 和onerror。如果 img 元素的这些处理程序也在别处设置(不太可能，但无论如何)，这可能会与页面上的其他代码冲突。如果您不确定您的页面没有使用它们并希望安全起见，请将 img.onload = img.onerror = resolve; 部分替换为更长的部分:img。添加事件监听器('加载'，解决)； img.addEventListener('error', resolve);.

它也不会测试是否所有图像都已成功加载(没有损坏的图像)。如果您需要这个，这里有一些更高级的代码:

Promise.all(Array.from(document.images).map(img => {
    if (img.complete)
        return Promise.resolve(img.naturalHeight !== 0);
    return new Promise(resolve => {
        img.addEventListener('load', () => resolve(true));
        img.addEventListener('error', () => resolve(false));
    });
})).then(results => {
    if (results.every(res => res))
        console.log('all images loaded successfully');
    else
        console.log('some images failed to load, all finished loading');
});

它会一直等到所有图片都加载完毕或加载失败。

如果你想尽早失败，第一张损坏的图像:

Promise.all(Array.from(document.images).map(img => {
    if (img.complete)
        if (img.naturalHeight !== 0)
            return Promise.resolve();
        else
            return Promise.reject(img);
    return new Promise((resolve, reject) => {
        img.addEventListener('load', resolve);
        img.addEventListener('error', () => reject(img));
    });
})).then(() => {
    console.log('all images loaded successfully');
}, badImg => {
    console.log('some image failed to load, others may still be loading');
    console.log('first broken image:', badImg);
});

两个最新的代码块使用 naturalHeight 来检测已加载图像中的损坏图像。这种方法通常有效，但有一些 drawbacks :据说当通过 CSS content 属性设置图像 URL 并且图像是未指定尺寸的 SVG 时，它不起作用。如果是这种情况，您将不得不重构代码，以便在图像开始加载之前设置事件处理程序。这可以通过在 HTML 中指定 onload 和 onerror 或通过在 JavaScript 中创建 img 元素来完成。另一种方法是在 HTML 中将 src 设置为 data-src 并在附加处理程序后执行 img.src = img.dataset.src .