Question

我收到了一个图片网址列表，目前我的网页上有几个隐藏的img元素（列表中的每个网址都有一个）。当页面加载完毕后，我使用JavaScript来检查图像并显示（即设置myImage.style.display =“inline”）第一个没有被破坏的图像。这很简单。但是，它要求我请求所有图像。

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

算法很简单，但技巧是图像加载时间。问题是在进行isBroken检查之前图像可能没有加载，因此可以忽略良好的图像。然后，方法是将img的onload和onerror事件处理到解决方案中。

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

谢谢！

Answer 1

看起来你有正确的想法。我会编写一个函数，尝试加载第一个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
    }
}

JavaScript：给定一个图像URL列表，如何显示第一个未损坏的图像？

1 个答案: