在開發(fā)H5項(xiàng)目中有時(shí)候會遇到要加載大量圖片的情況，利用預(yù)加載技術(shù)可以提高用戶瀏覽時(shí)的體驗(yàn)。
1)概念：
懶加載也叫延遲加載：JS圖片延遲加載,延遲加載圖片或符合某些條件時(shí)才加載某些圖片。
預(yù)加載：提前加載圖片，當(dāng)用戶需要查看時(shí)可直接從本地緩存中渲染。
2)區(qū)別：
兩種技術(shù)的本質(zhì)：兩者的行為是相反的，一個(gè)是提前加載，一個(gè)是遲緩甚至不加載。懶加載對服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會增加服務(wù)器前端壓力。
服務(wù)器端區(qū)別：懶加載的主要目的是作為服務(wù)器前端的優(yōu)化，減少請求數(shù)或延遲請求數(shù)。預(yù)加載可以說是犧牲服務(wù)器前端性能，換取更好的用戶體驗(yàn)，這樣可以使用戶的操作得到最快的反映。
例子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>preload</title> <style> * { margin: 0; pading: 0; } a { text-decoration: none; } .box { text-align: center; } .btn { display: inline-block; height: 30px; line-height: 30px; border: 1px solid #ccc; background: #fff; padding: 0 10px; margin-right: 50px; color: #333; } .btn:hover { background: #eee; } /*進(jìn)度條樣式*/ .loading { position: fixed; top: 0; left: 0; bottom: 0; right: 0; //撐滿整個(gè)屏幕 background: #eee; text-align: center; font-size: 30px; font-weight: bold; } .progress { margin-top: 300px; } </style></head><body> <!--無序預(yù)加載需要寫進(jìn)度條，當(dāng)加載完畢后才能操作； 有序預(yù)加載可以不寫進(jìn)度條，加載完第一張后立即加載第二張、第三張、第四張... --> <div class="box"> <img src="http://image.hnol.net/c/2010-11/14/21/201011142147143181-239867.jpg" id="img" <p> <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="btn" data-control="prev">上一張</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="btn" data-control="next">下一張</a> </p> </div> <!--進(jìn)度條--> <div class="loading"> <p class="progress">0%</p> </div> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <script src="~/Scripts/preload.js"></script> <script> var imgs = ['http://image.hnol.net/c/2010-11/14/21/201011142147143181-239867.jpg', 'http://www.picperweek.com/resource/image/dbc3c16b-5fc6-48e5-aa48-c64739739da2.png', 'http://imgstore.cdn.sogou.com/app/a/100540002/406526.jpg'], index = 0, len = imgs.length; $progress = $('.progress'); //有序預(yù)加載,可以不用寫進(jìn)度條部分，如果有寫，需要手動配置each()、all()方法 // $.preload(imgs,{ // order:'ordered' // }); //調(diào)用無序預(yù)加載 --imgs 數(shù)組存放預(yù)加載的圖片 $.preload(imgs, { //每張圖片加載(load事件)一次觸發(fā)一次each() each: function (count) { //進(jìn)度條顯示百分比進(jìn)度 $progress.html(Math.round((count + 1) / len * 100) + '%'); }, //加載完畢 all: function () { $('.loading').hide(); document.title = '1/' + len;//初始化第一張 } }); //未封裝成插件的無序預(yù)加載 // $.each(imgs,function(i,src){ // var imgObj = new Image(); //Image()實(shí)例用于緩存圖片 // // $(imgObj).on('load error',function(){ // $progress.html(Math.round((count + 1) / len * 100) + '%'); // // if(count >= len - 1){ // $('.loading').hide(); // document.title = '1/' + len; // } // count++;//每加載完一張圖片count加1 // }); // // imgObj.src = src;//緩存圖片 // }); //上一頁，下一頁按鈕 $('.btn').on('click', function () { if ('prev' === $(this).data('control')) { index = Math.max(0, --index); } else { index = Math.min(len - 1, ++index); } document.title = (index + 1) + '/' + len; $('img').attr('src', imgs[index]); }); </script></body></html>插件：
; (function ($) { function PreLoad(imgs, options) { //保存圖片到數(shù)組 this.imgs = (typeof imgs === 'string') ? [imgs] : imgs; this.opts = $.extend(PreLoad.defaults, options); // this._unordered();//如果只有無序預(yù)加載 if (this.opts.order === 'ordered') { this._ordered(); } else { this._unordered();//默認(rèn)是無序預(yù)加載 } }; PreLoad.defaults = { order: 'unordered', //指定默認(rèn)加載方式為無序 each: null, //每一張圖片加載完畢后執(zhí)行 all: null //所有圖片加載完畢后執(zhí)行 }; //有序預(yù)加載 PreLoad.prototype._ordered = function () { var opts = this.opts, imgs = this.imgs, len = imgs.length, count = 0; load(); function load() { var imgObj = new Image(); $(imgObj).on('load error', function () { //相當(dāng)于if(opts.each){ opts.each(); } ，如果有配置each()方法則調(diào)用，后面的all()同理 opts.each && opts.each(count); if (count >= len) { //所有圖片加載完畢 opts.all && opts.all(); } else { //如果沒加載完，繼續(xù)調(diào)用自身加載下一張 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) { //判斷圖片數(shù)組中的每一項(xiàng)是否為字符串，不是字符串會導(dǎo)致出錯(cuò)，因此返回 if (typeof src != 'string') return; var imgObj = new Image(); $(imgObj).on('load error', function () { //判斷opts.each是否存在，不存在則不執(zhí)行 opts.each && opts.each(count); if (count >= len - 1) { //判斷opts.all是否存在，存在則執(zhí)行 opts.all && opts.all(); } count++; }); imgObj.src = src;//緩存圖片 }); }; //由于不用具體的對象去調(diào)用，因此用$.extend(object)掛載插件. $.extend({ //preload為插件名 preload: function (imgs, opts) { new PreLoad(imgs, opts); } });})(jQuery);以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
