javascript img onload()

Question

我正在使用<img> onload函数在已加载的图像上触发调整大小操作。但是我发现如果在一个网页中有两个或更多的<img>带有相同的" src "，这意味着图像是相同的，那么后面的<img>的onload()函数将不会被调用。如何确保即使有一些具有相同src的<img>也能正确地调整所有<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: How to detect img is fully downloaded or not?

简而言之，你可以使用img标签的'complete‘属性。

在绑定load事件之前检查它。