`
bd_cool
  • 浏览: 60059 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

IMG加载出错处理onerror，并能防止死循环

web性能web前端 
阅读更多

img加载图片偶尔会出错，利用onerror可以加载一个缺省图片，也可以重载同一张图片。

但是都要考虑，重载的图片仍然错误，就会陷入死循环。

 

下面给出一个带重试次数，并且延迟加载的实现

 

<html>
<head>
<script>
/**
 * imgObj:img节点对象
 * imgSrc:出错时加载的图片地址
 * maxErrorNum:最大出错次数，防止出现死循环
 */
function showImgDelay(imgObj,imgSrc,maxErrorNum){
	showSpan.innerHTML += "--" + maxErrorNum;
	if(maxErrorNum>0){
		imgObj.onerror=function(){
			showImgDelay(imgObj,imgSrc,maxErrorNum-1);
		};
		setTimeout(function(){
			imgObj.src=imgSrc;
		},500);
	}else{
		imgObj.onerror=null;
	}
}

</script>
</head>
<body>
<img onerror="showImgDelay(this,'1a.jpg',2);" src="1a.jpg" width="200" height="200"/>
<span id="showSpan"></span>
</body>
</html>

 

分享到：
| LoadRunner 8.1 License（一万用户）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    img标签中onerror用法

    总的来说，`onerror`事件是前端开发中处理图像加载异常的重要工具，但正确使用它需要考虑可能的错误处理场景，防止无限循环或不必要的错误状态。在处理`onerror`事件时，推荐的做法是提供备用图片、显示占位符或者给...

    js注意img图片的onerror事件的分析

    一旦触发了onerror事件，执行一个函数，该函数可以重新设置一个有效图片的路径或者做一些其他的错误处理操作，并且可以将img元素的onerror属性设置为null，以防止无限循环的发生。如文档中提到的"nofind"函数所示： ...

    解析img图片没找到onerror事件 Stack overflow at line: 0

    在上述例子中，开发者尝试通过在 `onerror` 属性中设置新的图片源来处理图片加载失败的情况： ```html &lt;img src="pic.gif" onerror="javascript:this.src='/noPic.gif';" alt="pic" /&gt; ``` 这段代码的意思是，如果...

    IMG镜像加载小工具

    综上所述，"IMG镜像加载小工具"是IT专业人士在处理IMG镜像时的重要辅助工具，它的存在大大提高了工作效率，减少了手动操作的复杂性和出错概率。了解并熟练使用此类工具对于进行系统部署、固件升级等工作至关重要。

    JS对img标签进行优化使用onerror显示默认图像

    同时，为了防止默认图片再次触发onerror事件，需要将img元素的onerror属性置为null，从而避免无限循环的问题。 下面提供一个具体的实现示例： ```javascript function errorImg(img) { img.src = "***"; // 这里...

    img自动加载工具,需要的下

    在IT行业中，图片（img）自动加载工具是一个非常实用的软件解决方案，特别是在网页设计和开发、网络内容管理和大型网站优化中。这样的工具能够帮助用户在无需手动操作的情况下，有效地管理和加载大量的图片资源，...

    天下网吧IMG文件加载工具1.3

    《天下网吧IMG文件加载工具1.3》是一款专为网吧环境设计的实用工具，主要用于处理和管理网吧系统中的IMG镜像文件。IMG文件是广泛应用于网吧管理系统中的一个特殊格式，它通常包含了完整的操作系统、应用程序、游戏...

    IMG加载工具

    【标题】"IMG加载工具"是一种专为网吧环境设计的软件工具，它的主要功能是实现无盘系统的自动加载和管理。在网吧环境中，无盘技术能够显著降低维护成本，提高运营效率，因为所有的游戏、软件和系统更新都可以集中在...

    img自动加载工具

    "img自动加载工具"是一种专门用于自动化处理图片加载的软件，尤其适用于网吧环境，它与迅闪（一款可能的加速工具）协同工作，旨在提供更流畅的浏览体验。在本文中，我们将深入探讨img自动加载工具的工作原理、应用...

    锐起无盘IMG加载工具

    锐起无盘IMG加载工具是一款专门针对锐起无盘客户端设计的应用程序，主要用于处理和管理IMG格式的映像包。这种工具在IT行业中主要用于网络无盘环境的部署和维护，尤其是在网吧、教育机构或者企业环境中，能够有效地...

    image出错使用的属性

    ` 防止同一张图重复加载失败时无限循环触发`onerror`。 - `this.src='()%&gt;/qbpt-resource/images/zwtp.jpg';` 指定当原图像加载失败时替换为新的默认图像路径。 ##### 2. JavaScript动态处理 除了直接在HTML中使用...

    锐起IMG加载工具

    锐起IMG加载工具 非常好用的加载工具,锐起官方版

    JavaScript通过使用onerror设置默认图像显示代替alt

    同时，为了防止可能发生的死循环，在修改src属性后，将图片元素的onerror事件处理器设置为null。这样，图片元素不再对onerror事件做出响应，避免了在默认图片也无法加载时造成的无限重试。 为了避免错误处理导致的...

    DOS下加载ISO镜像文件 img文件

    "DOS下加载ISO镜像文件 img文件"的主题涉及的是如何在DOS环境下使用img文件来挂载并访问ISO镜像文件，这对于制作启动光盘或从ISO文件启动系统特别有用。下面将详细讲解这个过程中的关键知识点。 首先，了解ISO文件...

    js监听某张图片是否加载完成，完成后再执行相应代码

    同时，我们还需要处理可能出现的错误情况，如图片加载失败，这时可以使用`onerror`事件。 ```javascript // 创建一个新的Image对象 var img = new Image(); // 设置图片源 img.src = 'your-image-url.jpg'; // ...

    图片加载失败显示默认图片占位符方法

    onerror="onerror=null;src='http://www.lanrenzhijia.com/images/default.gif'" 将上述代码复制到你的图片标签中即可 然后故意将你的图片路径(src)指向一个错误地址，这个时候就会显示我们默认的图片

    JavaScript中的onerror事件概述及使用

    `&lt;img&gt;`标签的`onerror`事件专门用于处理图片加载失败的情况。如果图片由于网络问题、路径错误等原因无法加载，`onerror`事件处理器会被调用。这使得我们可以设置备用图片，或者进行其他处理，以避免显示空白或错误...

    微信小程序 image组件binderror使用例子与js中的onerror区别

    总结来说，微信小程序中的image组件的binderror事件是处理图片加载失败的关键技术点，它与传统web开发中的onerror事件有着相似的功能，但使用方式和语法有所不同。开发者需要根据小程序的运行环境和数据驱动界面的...

    IMG文件加载编辑工具

    IMG文件加载，将IMG文件生成虚拟盘，适合网吧，虚拟服务器等，可以进行IMG文件的编辑，特别是对IMG文件包的游戏更新。

    img 加载网络图片失败 显示默认图片的方法

    当从网络加载图片失败时，我们可以使用 img 标签的 onerror 属性来显示默认图片。onerror 属性可以指定当图片加载失败时执行的 JavaScript 代码。在这里，我们可以将默认图片的 URL 赋值给 img 标签的 src 属性，...

Magicbox
Global site tag (gtag.js) - Google Analytics