图片预加载插件 preLoad.js

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图片加载后

图片预加载插件 preLoad.js相关推荐

jQuery插件之图片预加载
背景: 图片是web页面的重要组成部分,也是前端页面优化的重要内容.当用户访问一个比较庞大的页面时,若相关资源没有提前加载,可能会展示给用户一片空白,从而导致用户流失等:再比如受网速的影响,资源加载时 ...
jquery图片预加载+自动等比例缩放插件
/* **************图片预加载插件****************** ///作者:没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明: ...
html图片怎么预加载,如何利用CSS和Javascript实现图片预加载
说到图片预加载,想必大家已经很熟悉了,在平时的项目中,我们常用插件实现预加载,比如:懒加载lazyload插件等等.如果你想了解下lazyload,可以看下这两篇文章: 今天主要想介绍不用插件实现图片 ...
html加载图片有超时时间吗,[前端]图片预加载方法
目录 1. 使用jQuery图片预加载(延迟加载)插件Lazy Load Lazy Load也叫惰性加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似 ...
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
CSS、JavaScript和Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...
图片预加载的三个方法
利用CSS.JavaScript及Ajax实现图片预加载的三大方法预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度. 这对图片 ...
3种Javascript图片预加载的方法详解
3种Javascript图片预加载的方法详解预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度. 这对图片画廊及图片占据很大比例 ...

图片预加载插件 preLoad.js

图片预加载插件 preLoad.js相关推荐

最新文章

热门文章