3

我收到一个图像 URL 列表，目前我的页面上有几个隐藏的 img 元素（列表中的每个 URL 一个）。页面加载完成后，我使用 JavaScript 检查图像并显示（即设置 myImage.style.display="inline"）第一个未损坏的图像。这很简单。但是，它要求我请求所有图像。

我想做的是一次加载每个图像并确定它是否损坏。如果图像损坏，请尝试加载下一张。如果它很好，则显示它并忽略其余部分。（这将节省一些不必要的请求。）

该算法很简单，但诀窍在于图像加载时间。问题是在 isBroken 检查发生之前图像可能尚未加载，因此可能会忽略良好的图像。然后的方法是将 img 的 onload 和 onerror 事件纳入解决方案。

我在这里发帖看看是否有人遇到过类似的问题以及他们的解决方案可能是什么。

谢谢！

4

1 回答 1

8

看来您的想法是正确的。我会编写一个函数来尝试加载第一个 URL 并设置 onerror 属性以再次调用该函数。您可以将 onload 函数设置为实际显示图像，因为您知道它成功了。

您可能希望摆脱全局变量，但想法如下：

var images = ["bad.jpg", "error.jpg", "good.jpg", "not-tried.jpg"];

function tryNextImage() {
    var url = images.shift();
    if (url) {
        var img = new Image();

        img.onload = function() {
            document.body.appendChild(img);
        };
        img.onerror = tryNextImage;

        img.src = url;
    }
    else {
        // Handle the case where none of the images loaded
    }
}
于 2008-12-15T00:49:53.083 回答