JS如何实现判断图片是否加载完成 - 行业资讯 - 肥雀云

　　介绍

这篇文章给大家分享的是有关JS如何实现判断图片是否加载完成的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

JS有什么特点

1, JS属于一种解释性脚本语言;2,在绝大多数浏览器的支持下,JS可以在多种平台下运行,拥有着跨平台特性;3,JS属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4,JS语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5,基于对象的脚本语言,JS不仅可以创建对象,也能使用现有的对象。

具体如下:

<强> 1,onload事件

& lt; ! DOCTYPE HTML> 　　& lt; html> 　　& lt;才能head> 　　,,,& lt; title> & lt;/title> 　　& lt;才能/head> 　　& lt;才能body> 　　,,,& lt; img src=https://www.yisu.com/zixun/巴枷?background.png”> 　　

加载… 　　<脚本type=" text/javascript”> 　　document.getElementsByTagName (img) [0]。onload=function () { 　　document.getElementsByTagName (p) [0]。innerHTML='加载完成!”; 　　}> 　　

<强> 2,完成属性

加载… 　　<脚本type=" text/javascript”> 　　回调函数imgLoad (img) { 　　var计时器=setInterval(函数(){ 　　如果(img.complete) { 　　回调(img); 　　clearInterval(计时器); 　　} 　　},50); 　　} 　　imgLoad (document.getElementsByTagName (img)[0],函数(){ 　　document.getElementsByTagName (p) [0]。innerHTML='加载完成!”; 　　})> 　　

<强> 3,onreadystatechange事件

加载… 　　<脚本type=" text/javascript”> 　　document.getElementsByTagName (img) [0]。onreadystatechange=function () { 　　如果这一点。readyState==巴暾眧 | this.readyState==凹釉亍? 　　document.getElementsByTagName (p) [0]。innerHTML='加载完成”; 　　}> 　　

注意:只有IE6-IE10支持<代码> onreadystatechange 事件,其它浏览器不支持。

<强> 4,onerror事件

网络状况不好或图片不存在都可能触发<代码> onerror 事件。

& lt; ! DOCTYPE HTML> 　　& lt; html> 　　& lt;才能head> 　　,,,& lt; title> & lt;/title> 　　& lt;才能/head> 　　& lt;才能body> 　　,,,& lt; img src=https://www.yisu.com/zixun/巴枷?notExistImg.png”> 　　

加载… 　　<脚本type=" text/javascript”> 　　document.getElementsByTagName (img) [0]。onload=function () { 　　document.getElementsByTagName (p) [0]。innerHTML='加载完成!”; 　　} 　　document.getElementsByTagName (img) [0]。onerror=function () { 　　document.getElementsByTagName (img) [0]。src="图片/background.png”; 　　}> 　　

触发<代码> onerror 事件后,会为img指定一个新的图片。

<强>问题:

新图片存在则显示新图片,但若新图片也不存在,则将继续触发<代码> onerror>

<>强解决:

通过将<代码> onerror 置为空,来防止页面循环跳动。

感谢各位的阅读!关于“JS如何实现判断图片是否加载完成”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!