js圖片未加載完顯示loading效果
阿新 • • 發佈：2018-12-21
nts case 顯示圖片 loaded center err let navi 初始化
<html>
<title>js圖片未加載完顯示loading效果</title>
<body>
<style>
img{float:left;width:200px;height:200px;margin:0 10px 10px 0}
</style>
<script>
//判斷瀏覽器
var Browser=new Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie=/msie/.test(Browser.userAgent);
Browser.Moz=/gecko/.test(Browser.userAgent);
//判斷是否加載完成 function Imagess(url,imgid,callback){ var val=url; var img=new Image(); if(Browser.ie){ img.onreadystatechange =function(){ if(img.readyState=="complete"||img.readyState=="loaded"){ callback(img,imgid); } } }else if(Browser.Moz){ img.onload=function(){ if(img.complete==true){ callback(img,imgid); } } } //如果因為網絡或圖片的原因發生異常，則顯示該圖片 img.onerror=function(){img.src="http://www.86y.org/images/failed.png"} img.src=val; }
//顯示圖片 function checkimg(obj,imgid){ document.getElementById(imgid).style.cssText=""; document.getElementById(imgid).src=obj.src; } //初始化需要顯示的圖片，並且指定顯示的位置 window.onload=function(){ var imglist=document.getElementById("imagelist").getElementsByTagName(‘img‘); for(i=0;i<imglist.length;i++) { imglist[i].id="img0"+i; imglist[i].style = "background:url(http://www.86y.org/images/loading.gif) no-repeat center center;"; Imagess(imglist[i].getAttribute("data"),imglist[i].id,checkimg); } } </script> <div id="imagelist"> <img data="http://www.smashingapps.com/wp-content/uploads/2013/05/uikitsforwebmobile17s.jpg" /> <img data="http://www.smashingapps.com/wp-content/uploads/2013/05/uikitsforwebmobile13.jpg" /> <img data="http://www.smashingapps.com/wp-content/uploads/2013/05/uikitsforwebmobile39.jpg" /> <img data="http://www.smashingapps.com/wp-content/uploads/2013/05/uikitsforwebmobile10.jpg" /> <img data="http://www.smashingapps.com/wp-content/uploads/2013/05/uikitsforwebmobile14.jpg" /> </div> </body> </html>
//判斷是否加載完成 function Imagess(url,imgid,callback){ var val=url; var img=new Image(); if(Browser.ie){ img.onreadystatechange =function(){ if(img.readyState=="complete"||img.readyState=="loaded"){ callback(img,imgid); } } }else if(Browser.Moz){ img.onload=function(){ if(img.complete==true){ callback(img,imgid); } } } //如果因為網絡或圖片的原因發生異常，則顯示該圖片 img.onerror=function(){img.src="http://www.86y.org/images/failed.png"} img.src=val; }
//顯示圖片 function checkimg(obj,imgid){ document.getElementById(imgid).style.cssText=""; document.getElementById(imgid).src=obj.src; } //初始化需要顯示的圖片，並且指定顯示的位置 window.onload=function(){ var imglist=document.getElementById("imagelist").getElementsByTagName(‘img‘); for(i=0;i<imglist.length;i++) { imglist[i].id="img0"+i; imglist[i].style = "background:url(http://www.86y.org/images/loading.gif) no-repeat center center;"; Imagess(imglist[i].getAttribute("data"),imglist[i].id,checkimg); } } </script> <div id="imagelist"> <img data="http://www.smashingapps.com/wp-content/uploads/2013/05/uikitsforwebmobile17s.jpg" /> <img data="http://www.smashingapps.com/wp-content/uploads/2013/05/uikitsforwebmobile13.jpg" /> <img data="http://www.smashingapps.com/wp-content/uploads/2013/05/uikitsforwebmobile39.jpg" /> <img data="http://www.smashingapps.com/wp-content/uploads/2013/05/uikitsforwebmobile10.jpg" /> <img data="http://www.smashingapps.com/wp-content/uploads/2013/05/uikitsforwebmobile14.jpg" /> </div> </body> </html>
js圖片未加載完顯示loading效果