资源简介
【实例简介】
封装图片预加载功能,便于直接调用
【使用方法】
//使用方式:
// var imgs = []; //存放图片地址的数组
// $.Load(imgs ,{
// order : 'unordered', //是否有序预加载,默认无序unordered,有序为ordered
// each : function(count){
// 每张图片加载完成的操作
// },
// all : function(){
// 所有图片加载完成之后的操作
// }
// })
【核心代码】
(function ($) {
function UnorderedLoad(imgs , options){
this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
this.opts = $.extend({}, UnorderedLoad.defaults, options); //后两个对象融合生成新的{}对象(即第三个覆盖第二个,生成第一个对象),返回给this.opts保存
if(this.opts.order === 'ordered'){
this.ordered();
}else{
this.unordered();
}
};
UnorderedLoad.defaults = {
order : 'unordered', //是否有序预加载,默认无序
each : null, //每张图片加载完成之后执行
all : null //所有的图片加载完成之后执行
};
UnorderedLoad.prototype.ordered = function(){ //有序加载
var imgs = this.imgs,
opts = this.opts,
count = 0,
len = imgs.length;
function load(){
var imgObj = new Image();
$(imgObj).on('load error',function(){
opts.each && opts.each(count); //判断方法是否存在,若存在,则执行
if(count >= len){
//所有图片加载完成
opts.all && opts.all();
}else{
load();
}
count ;
});
imgObj.src = imgs[count];
};
load();
},
UnorderedLoad.prototype.unordered = function(){ //无序加载
var imgs = this.imgs,
opts = this.opts,
count = 0,
len = imgs.length;
$.each(imgs , function(i , src){
if(typeof src != 'string'){
return;
}
var imgObj = new Image();
$(imgObj).on('load error',function(){
opts.each && opts.each(count);
if(count >= len - 1){
opts.all && opts.all();
}
count ;
});
imgObj.src = src;
});
};
$.extend({
Load : function(imgs,opts){
new UnorderedLoad(imgs,opts);
}
});
})(jQuery);
//使用方式:
// var imgs = []; //存放图片地址的数组
// $.Load(imgs ,{
// order : 'unordered', //是否有序预加载,默认无序unordered,有序为ordered
// each : function(count){
// 每张图片加载完成的操作
// },
// all : function(){
// 所有图片加载完成之后的操作
// }
// })
代码片段和文件信息
- 上一篇:jQuery+circliful圆形百分比统计图
- 下一篇:ztree帮助文档
评论
共有 条评论