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