每天一個JavaScript執行個體-判斷圖片是否載入完成,javascript執行個體
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>每天一個JavaScript執行個體-判斷圖片是否載入完成</title> <script> window.onload= function(){ //clearTimeout(clock);alert("載入完成");}var item = document.getElementsByTagName("img");var clock = setTimeout(function(){//var item = document.getElementsByTagName("img");//console.log(item);//console.log(item.item(item.length-1).onload); if(item.item(item.length-1).onload == null){ alert("還沒載入完成呢!");} },1000) </script> </head><body> <img src="http://i1.hoopchina.com.cn/blogfile/201401/13/BbsImg138957793449615_500*311.jpg" /> <img src="http://www.xyzwallpaper.com/wp-content/uploads/2014/07/girl-wallpaper-300x300.jpg" /> <img src="http://www.xyzwallpaper.com/wp-content/uploads/2014/07/girl-wallpaper-2-300x300.jpg" /> <img src="http://www.xyzwallpaper.com/wp-content/uploads/2014/07/girl-wallpaper-3-300x300.jpg" /> <img src="http://www.xyzwallpaper.com/wp-content/uploads/2014/07/girl-wallpaper-4-300x300.jpg" /> <img src="http://bestpaperz.com/data_images/out/40/8903786-shakira-in-the-chair.jpg" /> <img src="http://bestpaperz.com/data_images/out/40/8903770-red-currant.jpg" /> <img src="http://i1.hoopchina.com.cn/blogfile/201401/13/BbsImg138957793449615_500*311.jpg" /> <img src="http://bestpaperz.com/data_images/out/40/8903733-failed-surfing.jpg" /> <img src="http://bestpaperz.com/data_images/out/40/8903738-robert-pattinson.jpg" /> <img src="http://i1.hoopchina.com.cn/blogfile/201401/13/BbsImg138957793449615_500*311.jpg" /> <img src="http://bestpaperz.com/data_images/out/40/8903728-empty-bench.jpg" /> <img src="http://i1.hoopchina.com.cn/blogfile/201401/13/BbsImg138957793449615_500*311.jpg" /> <img src="http://bestpaperz.com/data_images/out/40/8903801-snow-park.jpg" /></body></html>
用javascript 怎判斷圖片是否載入完成?
function loadImage(url){
var o= new Image();
o.src = url;
if(o.complete){ window.alert('圖片載入完成:'+url); }else{
o.onload = function(){ window.alert('圖片載入完成:'+url); };
o.onerror = function(){ window.alert('圖片載入失敗:'+url); };
}
}
javascript怎判斷圖片是否載入錯誤
可以使用javascript裡面的image對象的onerror事件來處理,以下是示範代碼:
<img src="1.jpg" alt="" border="0" onerror="alert('啊,載入圖片錯誤啦!')" />