一、load事件
测试,所有浏览器都显示出了“loaded”,说明所有浏览器都支持img的load事件
二、readystatechange事件
readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件,其它浏览器不支持。
三、img的complete属性
轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询。该属性所有浏览器都支持。
onload方法
通过向img标签添加onload属性,并填入相应的函数来执行后续的javascipt代码。如下代码例子中img元素默认是不显示的,通过onload判断加载完成后再将图片显示出来。
function get(ts){
ts.style.display = 'block'; //显示图片
}
优点:可以将javascript代码部分放置于页面的任何部分加载,并且可以用于多数任意图片上。使用比较简单,易理解。
缺点:必须在每个标签上都贴上onlaod属性,在某些无法直接操作HTML代码,或者需要代码精简的情况下不适用
javascipt原生方法
选取指定ID的图片,通过onload指定回调方法,在图片加载完成后弹出“图片加载已完成”字样提示。
document.getElementById("pic1").onload