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

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

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

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

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

谢谢！

解决方法:

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

标签：dhtml,javascript,image,onerror
来源： https://codeday.me/bug/20190726/1548466.html