js组件之----图片预加载

/**
* 图片预加载
* dependencies: jQuery
* recommend: <script src='https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js'></script>
*/

(function(doc, win, $) {
function Preload(imgs, opts) {
this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;//若传入的不是数组,就转化为数组
this.opts = $.extend({}, Preload.DEFAULTS, opts);//浅拷贝

if (this.opts.order === 'unorder') {
this._unordered();//无须加载
} else {
this._ordered();//有序加载
}
}
Preload.DEFAULTS = {
order: 'unorder',//默认使用无须加载
each: null, //每张图片加载完成后执行
all: null //所有图片加载完成后执行
};
Preload.prototype._ordered = function() {//将方法添加进对象的原型中
var imgs = this.imgs,
opts = this.opts,
len = this.imgs.length,
count = 0;

function orload() {
var oImg = new Image();
$(oImg).on('load error', function() { //绑定事件
if (count >= len) {
return; //所有图片加载完毕
} else {
orload();
}
});
oImg.src = imgs[count++];
}
}

Preload.prototype._unordered = function() {
var imgs = this.imgs,
opts = this.opts,
len = this.imgs.length,
count = 0;

$.each(imgs, function(i, src) {
if (typeof src != 'string') return;
var oImg = new Image();

$(oImg).on('load error', function() {
opts.each && opts.each(count);
if (count >= len - 1) {
opts.all && opts.all();
}
count++;
});

oImg.src = src;//上面new的图片对象在添加src值之后才开始加载
});
};

$.extend({ //将Predload对象添加进jquery的原型中
preload: function(imgs, opts) {
new Preload(imgs, opts);
}
});
})(document, window, jQuery);