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

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