验证中...
语言: JavaScript
分类: JavaScript 工具
最后更新于 2019-02-12 17:01
片段 1 片段 2
依赖于jQuery,使用HTML DOM Image对象打造的懒加载插件
原始数据 复制代码
该插件一来jQuery, 引用该插件前请确保已引入jQuery;
讲需要懒加载的图片路径放入一个数组里面,如:imgs;
使用方式为:$.preload(imgs, options);
preload.js
原始数据 复制代码
// img pre-load
/**
* useage $.preload(imgs, options)
*/
(function() {
function Preload(imgs, options) {
this.imgs = (typeof imgs == 'string') ? [imgs] : imgs; //判断是否可能是单个图片的字符串
this.opts = $.extend({}, Preload.DEFAULT, options);
if (this.opts.order === 'unordered') {
this._unordered();
} else {
this._ordered();
}
}
// 默认配置
Preload.DEFAULT = {
order: 'unordered', //选择无序或有序加载
each: null, // 每张图片加载完成之后触发的事件
all: null // 所有图片加载完成之后触发的事件
}
Preload.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, len);
// $progress.html(((count + 1) / len).toFixed(2) * 100 + '%');
if (count >= len - 1) {
// $('.loading').hide();
// document.title = '1/' + len;
opts.all && opts.all(len);
}
count ++;
});
imgObj.src = src;
})
}
Preload.prototype._ordered = function() { //有序加载
var imgs = this.imgs, opts = this.opts, count = 0, len = imgs.length;
load();
function load() {
var img = new Image();
$(img).on('load error', function(i, src) {
opts.each && opts.each(count);
if (count >= len - 1) {
opts.all && opts.all();
} else {
load();
}
count ++;
})
img.src = imgs[count];
}
}
$.extend({
preload: function (imgs, opts) {
new Preload(imgs, opts);
}
})
})(jQuery)

评论列表( 0 )

你可以在登录后,发表评论

搜索帮助