Jquery实现图片的预加载与延时加载
2016-04-21 14:48
471 查看
有很多项目经常会需要判断图片加载完成后执行相应的操作,或者需要图片延迟加载,网上虽然已经有很不错的插件,但要为这些效果还得单独加载一个插件的话总感觉有点不舒服,干脆自己写了个方法:
参数说明:
arr:可以是存放图片路径的一个数组,也可以是选取到的img的jquery对象;
funLoading:每一个单独的图片加载完成后执行的操作;
funOnLoad:全部图片都加载完成后的操作;
funOnError:单个图片加载出错时的操作。
如:
调用示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 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:单个图片加载出错时的操作。
如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 2728 | 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);*/ |
相关文章推荐
- 使用jquery插件实现图片延迟加载技术(懒加载)
- JS/JQuery控制图片宽度
- jQuery使用伪递归重复执行动画
- jquery 回车事件
- JQuery实时监控文本框字符变化
- jQuery实现模拟滚动条效果;
- Jquery 删除最后一个元素
- jQuery实现拖动布局并将排序结果保存到数据库
- jQuery判断email地址 邮箱地址 email regex
- JQuery validate date 日期校验问题
- jQuery - Modal Window 15个模态窗口插件
- ajax+jquery实现父页面弹出子页面,选择提交后给父页面传值
- Java table列表 jQuery 绑定单元格change事件 取变更单元格的值
- jQuery对表单、表格的操作及更多应用
- 什么?你还不会写JQuery 插件
- jquery 图片轮播
- 使用jquery-fileupload.js实现文件上传-webx3
- jQuery获取Select选择的Text和 Value
- jQuery之手风琴图片
- JQuery输入框获取/失去焦点行为