1.preLoad.js插件
/*!
* preLoad.js v1.0
* (c) 2017 Meng Fangui
* Released under the MIT License.
*/
(function ($) {
function preLoad(imgs, options) {
//传入imgs参数是图片 还是 数组
this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
//处理传入参数
this.opts = $.extend({}, preLoad.DEFAULTS, options);
//有序加载
if(this.opts.order === 'ordered'){
this._ordered();
}else{
//无序加载
this._unordered();
}
} preLoad.DEFAULTS = {
order:'unordered',//默认值：无顺预加载
each: null, // 每一张图片加载完毕后执行
all: null, // 所有图片加载完后执行
}
preLoad.prototype._ordered = function(){
var opts = this.opts,
imgs = this.imgs,
len = imgs.length,
count = 0;
load();
//有序预加载
function load(){
//实例化Image对象
var imgObj = new Image();
//监听load和error事件
$(imgObj).on('load error',function(){
//每加载一张图片触发的事件
opts.each && opts.each(count);
if (count >= len) {
//所有的图片已经加载完 触发的事件
opts.all && opts.all();
} else{
load();
}
count++;
});
//图片路径赋值
imgObj.src = imgs[count];
}
};
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;
}
//实例化Image对象
var imgObj = new Image();
//监听load和error事件
$(imgObj).on('load error', function () {
//每加载一张图片触发的事件
opts.each && opts.each(count);
if (count >= len - 1) {
//所有的图片已经加载完 触发的事件
opts.all && opts.all();
}
count++;
});
//给图片赋值路径
imgObj.src = src;
});
};
$.extend({
preload: function (imgs, opts) {
new preLoad(imgs, opts);
}
});
})(jQuery);
2、实例
2.1 html代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片预加载之无序加载</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<div class="container">
<img src="http://image5.tuku.cn/wallpaper/Landscape%20Wallpapers/8294_2560x1600.jpg" alt="pic" id="img">
<p>
<a href="javascript:" class="btn" data-control="prev">上一页</a>
<a href="javascript:" class="btn" data-control="next">下一页</a>
</p>
</div>
<div class="loading">
<p class="progress">0%</p>
</div>
<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/preload.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.js"></script>
</body>
</html>
2.2css代码（main.css）
body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container{
margin: 100px 0;
text-align: center;
}
a{
text-decoration: none;
}
.btn{
display: inline-block;
line-height: 30px;
height: 30px;
outline: 0;
background-color: #eee;
color: #333;
padding: 5px 10px;
}
img{
width: 640px;
}
.btn:hover{
background-color: #ddd;
}
.loading{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #eee;
text-align: center;
font-size: 30px;
}
.progress{
margin-top:300px;
}
2.3js（main.js）
$(function() {
var imgs = [
'http://image5.tuku.cn/wallpaper/Landscape%20Wallpapers/8294_2560x1600.jpg',
'http://www.deskcar.com/desktop/fengjing/2011722123730/1.jpg',
'http://www.33lc.com/article/UploadPic/2012-8/20128181071010672.jpg',
'http://www.bbra.cn/Uploadfiles/imgs/2016/11/02/tu2/001.jpg',
'http://www.ctskyril.com/Public/article/2015-05-29/556812ea53938_thumb.jpg',
'http://www.doudouxitong.net/uploads/allimg/151221/1-15122114433V39.jpg',
'http://d.5857.com/zirfengg_141208/001.jpg',
'http://pic1.win4000.com/wallpaper/4/53fee27a01094.jpg',
'http://pic1.win4000.com/wallpaper/1/56821f8bb1e23.jpg'
];
var index = 0,
len = imgs.length,
$progress = $('.progress');
$.preload(imgs, {
each: function(count) {
$progress.html(Math.round((count + 1) / len * 100) + '%');
},
all: function() {
$('.loading').hide();
document.title = '1/' + len;
}
});
$('.btn').on('click', function() {
if($(this).data('control') === 'prev') {
// 上一张
index = Math.max(0, --index);
} else {
// 下一张
index = Math.min(len - 1, ++index);
}
document.title = (index + 1) + '/' + len;
$('#img').attr('src', imgs[index]);
});
});
3、运行上述代码时，需要注意文件路径
3.1 图片加载前
3.2图片加载后