插件:
//图片预加载插件
//使用闭包模拟局部作用域(function)();,保证不会和外面已有的变量冲突
(function ($) {
function PreLoad(imgs, options) {
//初始化
this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;//不同类型间比较,==之比较“转化成同一类型后的值”看“值”是否相等,===如果类型不同,其结果就是不等
this.opts = $.extend({}, PreLoad.DEFAULTS, options);//数据融合。options的内容覆盖PreLoad.DEFAULTS内容,返回给opts
/*//无序加载
this._unoredered();//加下划线表示方法只在内部使用,不提供外部调用*/
if(this.opts.order === 'ordered'){
this._ordered();
}else {
this._unoredered();
}
}
//当没有传参数时,使用默认参数
PreLoad.DEFAULTS = {
order:'unordered',//默认为无序加载
each: null,//每张图片加载完后执行
all: null//所有图片加载完后执行
};
//方法写在原型上,保障每次实例化的时候,都可以使它保持一份
PreLoad.prototype._ordered = function () {//有序加载,一张图片加载完成后加载另一张
var imgs = this.imgs,
opts = this.opts,
count = 0,
len = imgs.length;
load();
function load() {
//1.创建图片对象
var imgObj = new Image();
//2.绑定事件
$(imgObj).on('load error',function () {
opts.each && opts.each(count);
if(count>= len){
//所有图片加载完毕
opts.all && opts.all();
}else{
//某张图片加载出错,则调用自身再加载一次
load();
}
count++;
});
//3.图片路径赋值给图片对象的src,来开始预加载
imgObj.src = imgs[count];
}
};
PreLoad.prototype._unoredered = 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 () {//执行error方法是因为保证当某张图片加载失败后,保证程序继续执行
opts.each && opts.each(count);//判断opts的 参数each是否存在,如果存在就执行each().巧妙运用了&&运算符的特点,首项为false则后面的不会执行
if (count >= len - 1){
opts.all && opts.all();
}
count++;
});
imgObj.src = src;
});
};
//制作插件。两种方法。我们选择2
//1、$.fn.extend -> $(#img).preload()元素方法
//2、$.extend -> $.preload();工具方法
$.extend({
preload: function (imgs, opts) {
new PreLoad(imgs, opts);//实例化
}
});
})(jQuery);
无序加载使用:each为每张图片加载完成后执行的代码。all为所有图片加载完成后执行的代码
//使用插件
$.preload(imgs, {
each: function (count) {
$('.progress').html(Math.round((count + 1) / len * 100) + '%')
},
all: function () {
$('.loading').hide();
document.title = '1/' + len;
}
});
有序加载使用方法:
$.preload(imgs,{
order:'ordered'
});