代码之家 › 专栏 › 技术社区 › Chocula

JavaScript:给定一个图像URL列表,如何显示第一个未损坏的图像?

onerror dhtml image javascript

3

Chocula · 技术社区 · 17 年前

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

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

该算法相当简单,但关键在于图像加载时间。问题是,在isBroken检查发生之前,图像可能尚未加载,因此可以忽略一个好的图像。然后,方法是将img的onload和oneerror事件处理到解决方案中。

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

谢谢!

1 回复 | 直到 16 年前

1

8

Matthew Crumley 17 年前

看来你的想法是对的。我将编写一个函数,尝试加载第一个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
    }
}