圖片預加載插件 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圖片加載后

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM