摘要：
函数imgLoad｛vartimer=setInterval；｝img加载；判断缓存中是否已存在图像//事实证明，完整的属性不仅可以判断图像是否已成功加载，还可以判断该图像是否已存储在控制台中。缓存中的infosetTimeout2.加载事件//图像加载成功。事件img1.onload=function（）｛alert；p1.innerHTML=“图像加载成功”；｝测试，所有浏览器都显示“已加载”，表示所有浏览器都支持img加载事件3。Readystatechange事件readyState已完成并加载，表示图像已加载。
1.img的complete属性
轮询不断监测img的complete属性，如果为true则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。
<p id="p1"></p> <img id="img1"src="../Images/1.jpg" /> <script> functionimgLoad(img, callcack) { vartimer =setInterval(function() { if(img.complete) {//判断图片是否加载完成 callcack(img) clearInterval(timer); } }, 50); } imgLoad(img1, function() { p1.innerHTML = '加载完成'; }); </script>
判断图片是否在缓存中已经存在
<p id="p1"></p> <img id="img1"src="../Images/1.jpg" /> <img id="img2" /> <script> //证明complete 属性不仅可以判断图片是否加载成功，还可以判断图片是否已经在缓存中存在 console.info(img1.complete) setTimeout(function() { if(img1.complete) { console.info('加载成功' +img1.src); img2.src =img1.src; if(img2.complete) { console.info('img2加载成功'); } } else{ } }, 100); </script>
2.Load事件
<p id="p1"></p> <img id="img1"src="../Images/1.jpg" /> <script> //图片加载成功触发事件 img1.onload = function() { alert(3); p1.innerHTML = "图片加载成功"; } </script>
测试，所有浏览器都显示出了“loaded”，说明所有浏览器都支持img的load事件
3.readystatechange事件
readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件，其它浏览器不支持。
<img id="img1"src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg"> <p id="p1">loading...</p> <script type="text/javascript"> img1.onreadystatechange = function() { if(img1.readyState=="complete"||img1.readyState=="loaded"){ p1.innerHTML = 'readystatechange:loaded' } } </script>