快捷導(dǎo)航

jQuery簡(jiǎn)單實(shí)現(xiàn)圖片預(yù)加載

更新時(shí)間：2015年04月20日 11:52:38 投稿：hebedich

我們?cè)谧鼍W(wǎng)站的時(shí)候經(jīng)常會(huì)遇到這樣的問(wèn)題：一個(gè)頁(yè)面有大量的圖片導(dǎo)致頁(yè)面加載速度緩慢，經(jīng)常會(huì)出現(xiàn)一個(gè)白頁(yè)用戶體驗(yàn)很不好。那么如何解決這個(gè)問(wèn)題呢？下面我來(lái)介紹一種在實(shí)際應(yīng)用中經(jīng)常會(huì)使用到的js預(yù)加載的方法。

jQuery實(shí)現(xiàn)圖片預(yù)加載

JS代碼

$(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:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圖片預(yù)加載</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>

其他實(shí)例

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; 
  } 
  
}

參數(shù)說(shuō)明：
arr：可以是存放圖片路徑的一個(gè)數(shù)組，也可以是選取到的img的jquery對(duì)象；
funLoading：每一個(gè)單獨(dú)的圖片加載完成后執(zhí)行的操作；
funOnLoad：全部圖片都加載完成后的操作；
funOnError：?jiǎn)蝹€(gè)圖片加載出錯(cuò)時(shí)的操作。

懶加載，

var imgonload=function(errors){ 
    /*errors：加載出錯(cuò)的圖片數(shù)量；*/ 
  console.log("loaded,"+errors+" images loaded error!"); 
} 
  
var funloading=function(n,total,src,obj){ 
    /* 
    n：已加載完成的數(shù)量； 
    total：總共需加載的圖片數(shù)量； 
    src：當(dāng)前加載完成的圖片路徑； 
    obj：當(dāng)loadimg函數(shù)中傳入的arr為存放圖片路徑的數(shù)組時(shí)，obj=src，是圖片路徑， 
        當(dāng)arr為jquery對(duì)象時(shí)，obj是當(dāng)前加載完成的img dom對(duì)象。 
    */ 
  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!"); 
}

調(diào)試用例

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);*/

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: