jQuery简单实现图片预加载

jQuery实现图片预加载

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>图片预加载</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(["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);*/

以上所述就是本文的全部内容了，希望大家能够喜欢。