jquery實現圖片預加載
js代碼
$(function(){ loadimg(); function loadimg(url,callback){ var img = new image(); img.onload = function(){ img.onload = null; callback(img); } img.src=url; img.width =202; img.height = 202; img.attr(defaulturl,../images/img.png); if(){} } function addimg(img){ $(img).appendto($(.imgload li)) } })
html:
<!doctype html> <html lang=en> <head> <meta charset=utf-8> <title>圖片預加載</title> <link rel=stylesheet type=text/css href=css/index.css> <script type=text/javascript src=js/jquery-1.8.3.min.js></script> <script type=text/javascript src=js/index.js></script> </head> <body> <div class=imgload> <ul> <li class=fl></li> <li class=fl></li> <li class=fl></li> <li class=fl></li> <li class=fl></li> <li class=fl></li> <li class=fl></li> <li class=fl></li> <li class=fl></li> </ul> </div> </body> </html>
其他實例
function loadimg(arr,funloading,funonload,funonerror){ var numloaded=0, numerror=0, isobject=object.prototype.tostring.call(arr)===[object object] ? true : false; var arr=isobject ? arr.get() : arr; for(a in arr){ var src=isobject ? $(arr[a]).attr(data-src) : arr[a]; preload(src,arr[a]); } function preload(src,obj){ var img=new image(); img.onload=function(){ numloaded++; funloading && funloading(numloaded,arr.length,src,obj); funonload && numloaded==arr.length && funonload(numerror); }; img.onerror=function(){ numloaded++; numerror++; funonerror && funonerror(numloaded,arr.length,src,obj); } img.src=src; } }
參數說明：
arr：可以是存放圖片路徑的一個數組，也可以是選取到的img的jquery對象；
funloading：每一個單獨的圖片加載完成后執行的操作；
funonload：全部圖片都加載完成后的操作；
funonerror：單個圖片加載出錯時的操作。
懶加載，
var imgonload=function(errors){ /*errors：加載出錯的圖片數量；*/ console.log(loaded,+errors+ images loaded error!); } var funloading=function(n,total,src,obj){ /* n：已加載完成的數量； total：總共需加載的圖片數量； src：當前加載完成的圖片路徑； obj：當loadimg函數中傳入的arr為存放圖片路徑的數組時，obj=src，是圖片路徑， 當arr為jquery對象時，obj是當前加載完成的img dom對象。 */ console.log(n+of+total+ pic loaded.,src); var newimg = document.createelement(img); newimg.src=src; $(body).append(newimg).fadein(); } var funloading_obj=function(n,total,src,obj){ console.log(n+of+total+ pic loaded.,src); $(obj).attr(src,src); $(obj).fadein(200); } var funonerror=function(n,total,src,obj){ console.log(the +n+st img loaded error!); }
調試用例
console.log(loading...); loadimg($(img),funloading_obj,imgonload,funonerror); /*loadimg([, , , , ],funloading,imgonload,funonerror);*/
版權所有:易賢網
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試