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:

其他实例

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){ 
     
  console.log("loaded,"+errors+" images loaded error!"); 
} 
  
var funloading=function(n,total,src,obj){ 
     
  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); 
 

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