javascript - 如何检测图像文件是否存在于我的案例中？

<分区>

我有一系列如下图

image1.png
image2.png
image3.png
image4.png
…
…
image20.png



secondImg1.png
secondImg2.png
secondImg3.png
secondImg4.png
secondImg5.png
…….
……..
secondImg18.png

我想一次动态加载一张图片。

我的 js

var index = 1;
var timer = setInterval(function(){playAnime()},200);

function playAnime(){
    $('#holder').attr('src','image/image' + index + 'png')
    index++
}

我的代码显示了它如何工作的一般概念，但我不确定如何将索引停止在 20 和 18 以停止动画。 (我可以使用 if 语句来检查它是 20 还是 18，但我认为有更好的方法)

基本上，我想检测我的应用程序是否加载了 image21.png 和 secondImg19.png 并停止，因为没有这样的文件或图像已损坏。这可行吗？感谢您的帮助!

最佳答案

您可以使用 .error()事件处理器

$('#holder').attr('src', 'image/image' + index + 'png').error(function () {
    //Image does not exists do something
});

来自 Docs

The error event is sent to elements, such as images, that are referenced by a document and loaded by the browser. It is called if the element was not loaded correctly.

关于javascript - 如何检测图像文件是否存在于我的案例中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21712903/

上一篇：html - 在网页上定位 bing map 控件

下一篇：html - 电子邮件动画 gif 中的不同链接区域

相关文章：

jquery - 如何使用 Jquery 或 Javascript 检查浏览器

html - HTML视频标签显示YouTube视频

html - 使用 Canvas 标记图轴

javascript - 长度属性未返回所需的值

javascript - CSS 按钮 : hover, 禁用然后使用 javascript 重新启用

javascript - 在 li 中获取特定图像之上的跨度

html - 如何定制 ion-tabs？

javascript - 你如何在 Angular 中循环遍历不同的行(引导行)？

javascript - 第一个带有 jQuery 的空输入字段

javascript - 如何自动滚动相关的 html 表格