DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jQuery簡單實現圖片預加載
jQuery簡單實現圖片預加載
編輯:JavaScript綜合知識     

    jQuery實現圖片預加載:

  我們在做網站的時候經常會遇到這樣的問題:一個頁面有大量的圖片導致頁面加載速度緩慢,經常會出現一個白頁用戶體驗很不好。那麼如何解決這個問題呢?下面我來介紹一種在實際應用中經常會使用到的js預加載的方法。

  JS代碼

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 $(function(){ loadImg("http://d.hiphotos.baidu.com/image/pic/item/fd039245d688d43f14f69eff7f1ed21b0ef43b5b.jpg",addImg); 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:

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!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>

  其他實例

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 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:單個圖片加載出錯時的操作。

  懶加載,

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 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!"); }

  調試用例

  ?

1 2 3 4 5 6 7 8 console.log("loading..."); loadimg($("img"),funloading_obj,imgonload,funOnError); /*loadimg(["http://pic22.nipic.com/20120619/9607634_212642465144_2.jpg", "http://pic21.nipic.com/20120531/1670912_103610084349_2.jpg", "http://pic21.nipic.com/20120616/4952071_130629530136_2.jpg", "http://pic21.nipic.com/20120610/1723580_105037029000_2.jpg", "http://pic22.nipic.com/20120617/2572038_125013326121_2.jpg" ],funloading,imgonload,funOnError);*/

  以上所述就是本文的全部內容了,希望大家能夠喜歡。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved