使用Java脚本语言判断图片是否加载完成的三种实现方式

有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。有三种方式实现，下面一一介绍。一、负载事件复制代码代码如下：DOCTYPE HTML HTML head meta charset=' utf-8 ' title img-load事件/title/head body img id=' img 1 ' src=' http :3358 pic 1。赢4000。com/壁纸/f/51c3bb99a21ea.jpg' p id='p1 '正在加载./p脚本类型=' text/JavaScript ' img 1。onload=function(){ P1。innerhtml=' loaded ' }/脚本/正文/html测试，所有浏览器都显示出了"已加载",说明所有浏览器都支持img的负荷事件。二、readystatechange事件复制代码代码如下：DOCTYPE HTML HTML head meta charset=' utf-8 ' title img-readystatechange事件/title/头体img id=' img 1 ' src=' http :http://pic 1。赢4000。com/壁纸/f/51c3bb99a21ea.jpg' p id='p1 '正在加载./p脚本类型=' text/JavaScript ' img 1。onreadystatechange=function(){ if(img 1。readyState==' complete ' | | img 1。readyState==' loaded '){ P1。innerhtml=' readystatechange : loaded ' }/script/body/html readyState为完成和加载则表明图片已经加载完毕。测试IE6-IE10支持该事件，其它浏览器不支持。三、img的完成属性复制代码代码如下：DOCTYPE HTML HTML头元字符集=' utf-8 '标题img-完整属性/title/头体img id=' img 1 ' src=' http :3358 pic 1。赢4000。com/壁纸/f/51c3bb99a21ea.jpg' p id='p1 '正在加载./p脚本类型='text/javascript '函数imgLoad(img，callback){ var timer=setInterval(function(){ if(img。完成){回调(img)clearInterval(timer)}，50) } imgLoad(img1，function() { p1.innerHTML('加载完毕)})/脚本/正文/html轮询不断监测img的完成属性，如果为真实的则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持