JS圖片預(yù)加載插件詳解

更新時間：2017年06月21日 11:58:31 作者：花生噠噠

這篇文章主要為大家詳細(xì)介紹了JS圖片預(yù)加載插件的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在開發(fā)H5項目中有時候會遇到要加載大量圖片的情況，利用預(yù)加載技術(shù)可以提高用戶瀏覽時的體驗。

1)概念：

懶加載也叫延遲加載：JS圖片延遲加載,延遲加載圖片或符合某些條件時才加載某些圖片。
預(yù)加載：提前加載圖片，當(dāng)用戶需要查看時可直接從本地緩存中渲染。

2)區(qū)別：

兩種技術(shù)的本質(zhì)：兩者的行為是相反的，一個是提前加載，一個是遲緩甚至不加載。懶加載對服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會增加服務(wù)器前端壓力。

服務(wù)器端區(qū)別：懶加載的主要目的是作為服務(wù)器前端的優(yōu)化，減少請求數(shù)或延遲請求數(shù)。預(yù)加載可以說是犧牲服務(wù)器前端性能，換取更好的用戶體驗，這樣可以使用戶的操作得到最快的反映。

例子：

<!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;
      //撐滿整個屏幕 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" alt="pic" width="1000">
    <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()實例用于緩存圖片
    //
    //      $(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ù)組中的每一項是否為字符串，不是字符串會導(dǎo)致出錯，因此返回
      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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: