javascript img onload（）

Question

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

感谢。

Answer 1

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

Answer 2

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

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: How to detect img is fully downloaded or not?

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