lazyload 延遲加載

時間 2019-11-18

標籤 lazyload 延遲加載简体版

原文原文鏈接

0 前言

如今在作手機移動端的網站，由於是電商類，所以會有各類各樣的圖片，老大對於這麼多圖片的加載表示十分不爽，因而在各類探索能夠延遲加載圖片啊什麼的方法，因而jquery.lazyload.js就映入眼簾了。html

github ： https://github.com/tuupola/jquery_lazyloadjquery

1 用法

jquery.lazyload.js 是基於jquery的，這裏是從github上面下載下來的demos，分享在度盤了 http://pan.baidu.com/s/1eQkXSNCgit

簡單寫幾個例子：默認的延遲加載、設定區域延遲加載、自定義事件延遲加載等，我以爲這樣的組合基本上就差很少夠用了，更多的功能看看demo研究一下應給問題不大~github

1.1 準備工做

1.1.1 js庫

首先固然了，jquery.js和jquery.lazyload.js都得有吧~？前者在網上找就好，不過筆者學習的時候用的1.4.2 ；後者直接去網盤分享裏面扒就是了~chrome

1.1.2 圖片

嗯，多準備一些圖片有備無患啊，最好是每行一張的條件下可以多出瀏覽器可視範圍不少，這樣貌似能更好的觀察效果啊~瀏覽器

1.2 html代碼

話很少說，直接放代碼，這段html代碼基本上就不會變了函數

<!DOCTYPE html>
<html>
  <head>
    <title>lazyload的測試</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="pics1">
      <img data-original="img/1.jpg" alt="pic1-1" height="200" width="640" /><br />
      <img data-original="img/2.jpg" alt="pic1-2" height="200" width="640" /><br />
      <img data-original="img/3.jpg" alt="pic1-2" height="200" width="640" /><br />
      <img data-original="img/3.png" alt="pic1-3" height="200" width="640" /><br />
      <img data-original="img/1.png" alt="pic1-4" height="200" width="640" /><br />
      <img data-original="img/2.png" alt="pic1-5" height="200" width="640" /><br />
    </div>
    <div id="pics2">
      <img data-original="img/4.jpg" alt="pic2-1" height="200" width="640" /><br />
      <img data-original="img/4.png" alt="pic2-1" height="200" width="640" /><br />
      <img data-original="img/5.jpg" alt="pic2-2" height="200" width="640" /><br />
      <img data-original="img/5.png" alt="pic2-2" height="200" width="640" /><br />
    </div>
    
     <!--    這裏留着用來寫不一樣的js代碼，之後的代碼就放在這裏  -->


  </body>
</html>

很明顯，img標籤中沒有咱們熟悉的src屬性，取而代之的是 data-original屬性，這個屬性就是lazyload庫用來延遲處理圖片文件時所用的屬性了，【綠字可不看：這個data-original屬性固然是能夠改的，只要改lazyload的源碼就行了。。。工具

嗯，html代碼打算一共展現10張圖片，而且用br換行，爲了演示更多的效果，將圖片分爲了2組，分別用兩個div包裹了起來學習

每一個img標籤設置了height和width屬性，這個對於延遲加載來講是頗有用的，本身加上跟去掉，嘗試一下效果就行了，這裏咱們先帶着。開發工具

嗯，html就到這裏，接下來是對lazyload的各類探索了~

1.3 各類延遲加載的嘗試

首先須要說的是，貌似這個插件曾經作的是「假延遲」，聽說仍然是所有將圖片加載完以後再控制前臺的顯示，不過這個版本不是這個樣子，插件到底何時加載了圖片，能夠用各類瀏覽器的開發工具查看，例如chrome的network標籤

就是說明一種檢驗的方法，要否則我怎麼知道它究竟是不是延遲加載了呢。。。如下開始正式嘗試。

1.3.1 默認的延遲加載

嗯，仍然是直接放代碼

<script src="jquery-1.4.2.min.js" ></script>
<script src="jquery.lazyload.min.js" ></script>
<script>
        $('img').lazyload();
</script>

嗯，這裏只是簡單的選取了全部img標籤，而後調用lazyload方法，因而，你就能夠打開chrome的network頁面，訪問這個頁面了，你會發現只請求了頁面可見範圍左右的圖片，並且還有一堆data:image……的請求，這些請求是lazyload插件默認的圖片佔位符，其實表示的就是一張圖片了，有興趣的話能夠該lazyload代碼換成本身想要的小圖片代碼

而後往下拉動瀏覽器滾動條，你會逐漸發現瀏覽器在逐個的請求頁面下方的圖片文件，這就是最簡單的默認延遲加載。

1.3.2 加上加載效果的延遲加載

<script src="jquery-1.4.2.min.js" ></script>
    <script src="jquery.lazyload.min.js" ></script>
    <script>
        $('img').lazyload({
          effect : 'fadeIn'
        });
    </script>

加了一個effect的屬性值，其餘同上，只是當圖片出現的時候會有一個淡入的效果

1.3.3 設定區域延遲加載

這大概是一種加速頁面顯示很容易想到的思路，好比先讓用戶可見部分加載，再讓首先不可見的部分加載，最後再讓其餘很不重要的地方的圖片慢慢加載【綠字可不看：我以爲對於這個問題應該是有更好的處理方式，不過這裏就拿lazyload解決了

<script src="jquery-1.4.2.min.js" ></script>
    <script src="jquery.lazyload.min.js" ></script>
    <script>
        $('#pics1 img').lazyload({
          effect : 'fadeIn'
        });
    </script>

與前面的區別僅僅是選擇器不一樣而已，相信看了這個效果你們就會各類選擇區域設置不一樣的加載場景了。

1.3.4 設定事件延遲加載

<script src="jquery-1.4.2.min.js" ></script>
    <script src="jquery.lazyload.min.js" ></script>
    <script>
        $('#pics2 img').lazyload({
          effect : 'fadeIn',
          event : 'waitforcall'
        });
        setTimeout(function(){
          $('#pics2 img').trigger('waitforcall');
        },5000);
    </script>

這裏在lazyload里加了一個event屬性，而這個事件名稱徹底是本身起的，而後在接下來的腳本里面使用了一個延遲函數，5s後讓pics2這個div中的圖片們觸發「waitforcall」事件，效果就是5s後讓這些圖片加載並淡入效果顯示。

應該指出的是，既然使用的trigger來觸發，那麼即便這些圖片不在當前可視範圍內，也會在5s後加載。

有了這個示例，大概對於如何使用lazyload來處理整個頁面圖片的加載，加快頁面顯示速度，你們可能就會有一些想法了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。