css完成图片预加载,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.οnlοad=function(){

numLoaded++;

funLoading && funLoading(numLoaded,arr.length,src,obj);

funOnLoad && numLoaded==arr.length && funOnLoad(numError);

};

img.οnerrοr=function(){

numLoaded++;

numError++;

funOnError && funOnError(numLoaded,arr.length,src,obj);

}

img.src=src;

}

}

参数说明：

arr：可以是存放图片路径的一个数组，也可以是选取到的img的jquery对象；

funLoading：每一个单独的图片加载完成后执行的操作；

funOnLoad：全部图片都加载完成后的操作；

funOnError：单个图片加载出错时的操作。

懒加载，

var imgοnlοad=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);*/

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