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);*/
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
