javascript img onload（）

Question

我正在使用<img> onload函数来触发已加载图像的调整大小操作。 但我发现如果在一个网页中有两个或更多<img> s具有相同的“src”，这意味着图像是相同的，后者<img>的onload（）函数将不会被调用。 如果有一些<img> s具有相同的src，如何确保所有<img>都被正确调整大小？

谢谢。

Answer 1

发生这种情况是因为您的浏览器实际上正在缓存第一个图像。 因此，当您尝试再次加载相同的“src”时，它会在本地缓存，而不会实际触发onload。 要始终加载它，您可以在查询字符串上附加唯一值。

Answer 2

而不是为每个<img/>使用单独的onload处理程序，为什么不只是为window使用单个onload事件？ 此事件在所有内容 （如所有图像）都已加载后触发，因此您可以只处理该单个处理程序中的每个图像。 就像是：

function processAllImages()
{
    var imgElts = document.getElementsByTagName('img');
    for (var i=0; i<imgElts.length; i++)
    {
        processImage(imgElts[i]); // TODO write this function
    }
}

window.onload = processAllImages;

Answer 3

我之前问了类似的问题。
看看这个： Javascript / jQuery：如何检测img是否完全下载？

简而言之，您可以使用img标签的“完整”属性。
在绑定load事件之前检查它。