1.preLoad.js插件
1 /*!
2 * preLoad.js v1.0
3 * (c) 2017 Meng Fangui
4 * Released under the MIT License.
5 */
6 (function ($) {
7 function preLoad(imgs, options) {
8 //传入imgs参数是图片 还是 数组
9 this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
10 //处理传入参数
11 this.opts = $.extend({}, preLoad.DEFAULTS, options);
12 //有序加载
13 if(this.opts.order === 'ordered'){
14 this._ordered();
15 }else{
16 //无序加载
17 this._unordered();
18 }
19 }
20
21 preLoad.DEFAULTS = {
22 order:'unordered',//默认值:无顺预加载
23 each: null, // 每一张图片加载完毕后执行
24 all: null, // 所有图片加载完后执行
25 }
26 preLoad.prototype._ordered = function(){
27 var opts = this.opts,
28 imgs = this.imgs,
29 len = imgs.length,
30 count = 0;
31 load();
32 //有序预加载
33 function load(){
34 //实例化Image对象
35 var imgObj = new Image();
36 //监听load和error事件
37 $(imgObj).on('load error',function(){
38 //每加载一张图片触发的事件
39 opts.each && opts.each(count);
40 if (count >= len) {
41 //所有的图片已经加载完 触发的事件
42 opts.all && opts.all();
43 } else{
44 load();
45 }
46 count++;
47 });
48 //图片路径赋值
49 imgObj.src = imgs[count];
50 }
51 };
52 preLoad.prototype._unordered = function () {
53 //无序加载
54 var imgs = this.imgs,
55 opts = this.opts,
56 count = 0,
57 len = imgs.length;
58
59 $.each(imgs, function (i, src) {
60 //判断图片路径是否是字符串
61 if (typeof src != 'string') {
62 return;
63 }
64 //实例化Image对象
65 var imgObj = new Image();
66 //监听load和error事件
67 $(imgObj).on('load error', function () {
68 //每加载一张图片触发的事件
69 opts.each && opts.each(count);
70 if (count >= len - 1) {
71 //所有的图片已经加载完 触发的事件
72 opts.all && opts.all();
73 }
74 count++;
75 });
76 //给图片赋值路径
77 imgObj.src = src;
78 });
79 };
80 $.extend({
81 preload: function (imgs, opts) {
82 new preLoad(imgs, opts);
83 }
84 });
85 })(jQuery);
2、实例
2.1 html代码:
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="UTF-8">
5 <title>图片预加载之无序加载</title>
6 <link rel="stylesheet" type="text/css" href="css/main.css"/>
7 </head>
8 <body>
9 <div class="container">
10 <img src="http://image5.tuku.cn/wallpaper/Landscape%20Wallpapers/8294_2560x1600.jpg" alt="pic" id="img">
11 <p>
12 <a href="javascript:" class="btn" data-control="prev">上一页</a>
13 <a href="javascript:" class="btn" data-control="next">下一页</a>
14 </p>
15 </div>
16 <div class="loading">
17 <p class="progress">0%</p>
18 </div>
19 <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
20 <script src="js/preload.js" type="text/javascript" charset="utf-8"></script>
21 <script src="js/main.js"></script>
22 </body>
23 </html>
2.2css代码(main.css)
1 body{
2 margin: 0;
3 padding: 0;
4 width: 100%;
5 height: 100%;
6 }
7 .container{
8 margin: 100px 0;
9 text-align: center;
10 }
11 a{
12 text-decoration: none;
13 }
14
15 .btn{
16 display: inline-block;
17 line-height: 30px;
18 height: 30px;
19 outline: 0;
20 background-color: #eee;
21 color: #333;
22 padding: 5px 10px;
23 }
24 img{
25 width: 640px;
26 }
27
28 .btn:hover{
29 background-color: #ddd;
30 }
31
32 .loading{
33 position: fixed;
34 top: 0;
35 left: 0;
36 width: 100%;
37 height: 100%;
38 background-color: #eee;
39 text-align: center;
40 font-size: 30px;
41 }
42
43 .progress{
44 margin-top:300px;
45 }
2.3js(main.js)
1 $(function() {
2 var imgs = [
3 'http://image5.tuku.cn/wallpaper/Landscape%20Wallpapers/8294_2560x1600.jpg',
4 'http://www.deskcar.com/desktop/fengjing/2011722123730/1.jpg',
5 'http://www.33lc.com/article/UploadPic/2012-8/20128181071010672.jpg',
6 'http://www.bbra.cn/Uploadfiles/imgs/2016/11/02/tu2/001.jpg',
7 'http://www.ctskyril.com/Public/article/2015-05-29/556812ea53938_thumb.jpg',
8 'http://www.doudouxitong.net/uploads/allimg/151221/1-15122114433V39.jpg',
9 'http://d.5857.com/zirfengg_141208/001.jpg',
10 'http://pic1.win4000.com/wallpaper/4/53fee27a01094.jpg',
11 'http://pic1.win4000.com/wallpaper/1/56821f8bb1e23.jpg'
12 ];
13
14 var index = 0,
15 len = imgs.length,
16 $progress = $('.progress');
17
18 $.preload(imgs, {
19 each: function(count) {
20 $progress.html(Math.round((count + 1) / len * 100) + '%');
21 },
22 all: function() {
23 $('.loading').hide();
24 document.title = '1/' + len;
25 }
26 });
27
28 $('.btn').on('click', function() {
29 if($(this).data('control') === 'prev') {
30 // 上一张
31 index = Math.max(0, --index);
32 } else {
33 // 下一张
34 index = Math.min(len - 1, ++index);
35 }
36 document.title = (index + 1) + '/' + len;
37 $('#img').attr('src', imgs[index]);
38 });
39 });
3、运行上述代码时,需要注意文件路径
3.1 图片加载前
3.2图片加载后