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

2019-07-26 23:44:28 阅读：213 来源： 互联网

我收到了一个图片网址列表,目前我的网页上有几个隐藏的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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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