JS判断图片是否加载 完整的方法总结(最新版本)

有时候你需要得到图片的大小，这需要在图片加载后完成。下面小编总结了关于JS判断图片是否加载的几种方法。让我们来看看。

I .负载事件。

脚本类型=' text/JavaScript' $ ('img ')。onload=function(){//code }/script优点：使用方便，不影响HTML代码。

缺点：只能指定一个元素，javascipt代码必须放在图片元素下。

第二，jquery方法。

脚本类型=' text/JavaScript ' $(function(){ $(. pic1 '))。每个(函数(){$(this))。load(function(){$(this))。fadeIn()；});});})/脚本注意，不要在$(文档)中绑定加载事件。就绪()。

优点：可以批量绑定元素事件，不影响HTML代码的内容。缺点：需要jquery库的支持，代码需要放在要操作的元素下面。

Iii .readystatechange事件。

！DOCTYPE HTMl HTMl head meta charset=' utf-' title img-readystatechange事件/title/head body img id=' img ' src=' http :http://pic . win.com/壁纸/f/cbbaea.jpg'p id='p'loading./pscript type=' text/JavaScript ' img . onreadystatechange=function(){ if(img . readystate==' complete ' | | Img . readystate==' loaded '){ p . innerhtml=' readystate change : loaded ' }/script/body/html readystate已完成并加载，表示图片已加载。测试IE6-IE10支持此事件，但其他浏览器不支持。

四.img的完整属性。

！DOCTYPE HTMl HTMl head meta charset=' utf-8 ' title img-完整属性/title/head body img id=' img 1 ' src=' http :3358 pic 1 . win 4000.com/壁纸/f/51c3bb99a21ea.jpg'p id='p1 '正在加载./pscript type=' text/JavaScript ' function imgLoad(img，callback){ var timer=setInterval(function(){ if(img.complete){ callback(img)clearInterval(timer)} }，50)}imgLoad(img1，The function() {p1.innerHTML('完成加载')})/script/body/htmlpolling持续监控img的完整属性。如果为真，表示图片已经加载，停止轮询。所有浏览器都支持此属性。

以上内容是边肖介绍的判断图片是否加载的JS方法的总结。希望对大家有所帮助，也非常感谢大家对我们网站的支持！