jquery简单实现图片预加载

swmozowtfl · *发表于* 2015-7-9 23:19:41

jquery实现图片预加载
js代码
$(function(){ loadimg(); 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([, , , , ],funloading,imgonload,funonerror);*/

更多网页制作信息请查看：网页制作

wwzcdenleclv · *发表于* 2015-11-3 16:44:51

希望这样的好贴多些，再多些！！！

tohme · *发表于* 2015-11-3 16:44:26

我刚来~~~嘿嘿~~此声明最终解释权归本人所有。

GoodyFouppy · *发表于* 2015-11-3 16:44:20

挨骂也是幸福～～～

alapScady · *发表于* 2015-11-3 16:45:08

手机版的得知互动论坛好强大

Acropozelan · *发表于* 2015-11-3 16:43:45

不错的东西持续关注

gevaemaidovef · *发表于* 2016-1-15 14:21:35

因删贴不及时所产生的任何法律（书法，基本法，劳动法，婚姻法，输入法，国际法，今日说法，与台湾关系法及文中涉及或可能涉及以及未及之法，各地治安管理条例）纠纷或责任本人概不负责。

wwzcdenleclv · *发表于* 2016-1-15 14:21:31

怎么这么跟别人不一样类~

effoggikeftor · *发表于* 2016-1-15 14:21:11

系统居然怀疑我灌水，我身边又没有水龙头。哦…明白了，身上有一个……

alapScady · *发表于* 2016-1-15 14:21:55

还呕像.....

buingeEvineus · *发表于* 2016-1-15 14:21:33

好吧...那你说...

jquery简单实现图片预加载

猜你喜欢

回复|共 10 个

回复

快捷导航