誰需要 AMP？使用 Layzr.js 簡化延遲加載響應(yīng)圖像的過程-魔扣目錄

Google 的“加速移動頁面”(AMP) 項目最近幫助影響網(wǎng)站變得更快。憑借良好的技術(shù)和強大的內(nèi)容分發(fā)網(wǎng)絡(luò)，Google 直接使 AMP 增強的網(wǎng)站變得更快。然而，AMP 也通過鼓勵我們查看 AMP 包含的優(yōu)化和最佳實踐來間接發(fā)揮作用。即使您不打算讓您的網(wǎng)站兼容 AMP，將 AMP 了解為優(yōu)化非 AMP 網(wǎng)站的待辦事項列表也很有用。

此列表中的優(yōu)化之一是一種稱為“延遲加載”的技術(shù)，我們在最近關(guān)于使用 AMP 的自定義元素的文章中看到了該技術(shù)的實際應(yīng)用。通過這種技術(shù)，當(dāng)訪問者首次到達(dá)頁面時，僅加載視口中或附近的圖像。當(dāng)訪問者向下滾動時，其余部分會被觸發(fā)加載。

延遲加載可以讓訪問者更快地開始與內(nèi)容互動，而增強的加載速度可以提高您的搜索引擎排名。頁面上的圖像越多，獲得的速度提升就越大。

在本教程中，我們將了解如何使用名為的腳本在非 AMP 網(wǎng)站上部署延遲加載Layzr.js。我們將盡可能地復(fù)制 AMP 的元素的功能，但我們還將使用 Layzr 特有的一些功能。

我們開始吧！

1. 基本設(shè)置

作為文章“AMP 項目：它會讓您的網(wǎng)站更快嗎？”的一部分我創(chuàng)建了一個包含五個圖像的基本布局。為了使您能夠比較使用 AMP 和自己部署延遲加載，我們將重新創(chuàng)建相同的五個圖像布局。我將在本教程后面向您展示如何運行各種加載速度測試。

在本教程附帶的源文件中，您將找到布局的 AMP 版本，以及您將在此處制作的完整版本。兩者都包含在內(nèi)，以幫助您決定哪種方法最適合您。

在我們逐步完成所有操作時，我建議您使用 Chrome 開發(fā)者工具 (F12) 測試您的工作，并打開網(wǎng)絡(luò)選項卡，選中禁用緩存 ，并將限制設(shè)置為常規(guī) 3G。這會模擬平均移動連接，向您實時顯示每個圖像加載的圖表，并將幫助您清楚地了解延遲加載的運行情況。

刷新頁面進行測試時，按住重新加載按鈕，這將出現(xiàn)一個下拉菜單會顯示不同的選項。選擇清空緩存并硬重新加載以完全模擬訪問者首次到達(dá)您的網(wǎng)站。

創(chuàng)建 HTML Shell

讓我們從基礎(chǔ)知識開始。首先，創(chuàng)建一個文件夾來存放您的項目，并在其中創(chuàng)建一個名為 index.html 的文件。

打開它進行編輯并添加以下代碼：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Layzr.js Lazy Loading</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style>
    body {
      margin: 0;
    }
    img {
      display: block;
      margin: 0 auto;
    }
    </style>
  </head>
  <body>
    <h1>Welcome to the lazy loaded web</h1>



  </body>
</html>

登錄后復(fù)制

通過上面的代碼，我們只是獲得了一個 HTML shell，并包含了一些 CSS，以確保頁面的 body 和圖像周圍沒有任何意外的間隙。

我們還包括 margin: 0 auto; ，以便我們稍后添加的圖像將居中。

加載 Layzr

layzr.js 腳本有兩個方便您加載的 CDN 源 – 我們將使用來自 Cloudfare 的一個。

將此代碼添加到您的 html 中，位于結(jié)束 </body> 標(biāo)記之前。

<script src="https://cdnjs.cloudflare.com/ajax/libs/layzr.js/2.0.2/layzr.min.js"></script>

登錄后復(fù)制

如果您不想從 CDN 加載腳本，您可以下載該腳本并按照以下網(wǎng)址的簡短說明進行操作：https://github.com/callmecavs/layzr.js#download

即時 Layzr

現(xiàn)在我們已經(jīng)加載了 Layzr，我們需要讓它在頁面加載時執(zhí)行。為此，請將此代碼添加到您剛剛在上一節(jié)中插入的 script 標(biāo)記之后：

<script>
const instance = Layzr()

document.addEventListener('DOMContentLoaded', function(event){
  instance.update().check().handlers(true)
})
</script>

登錄后復(fù)制

此代碼首先創(chuàng)建一個用于包含 Layzr 的實例，然后在加載頁面的 DOM 內(nèi)容后，它使用該實例來激活 Layzr 的功能。

到目前為止，您的整體代碼現(xiàn)在應(yīng)如下所示：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Layzr.js Lazy Loading</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style>
    body {
      margin: 0;
    }
    img {
      display: block;
      margin: 0 auto;
    }
    </style>
  </head>
  <body>
    <h1>Welcome to the lazy loaded web</h1>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/layzr.js/2.0.2/layzr.min.js"></script>
    <script>
    const instance = Layzr()

    document.addEventListener('DOMContentLoaded', function(event){
      instance.update().check().handlers(true)
    })
    </script>

  </body>
</html>

登錄后復(fù)制

2. 添加圖像（正常分辨率）

Layzr 已加載并準(zhǔn)備就緒，我們可以開始添加一些圖像以使其發(fā)揮其魔力。您可以使用您想要的任何圖像，但是如果您想使用在以下步驟中看到的確切代碼示例，您可以下載本教程附帶的源文件。在其中您將找到一個 images 文件夾，您可以將其復(fù)制并粘貼到您自己的項目中。

要在使用 Layzr 時添加圖像，您將使用常規(guī) img 元素，但不使用 src 屬性，而是使用 data-normal 像這樣：

<img data-normal="images/vulture.jpg" alt="Vulture">

登錄后復(fù)制

確保圖像具有高度

為了使任何延遲加載腳本正常工作，它需要知道網(wǎng)站上所有圖像的高度，以便決定需要加載哪些圖像（因為它們位于視口中或靠近視口），以及哪些圖像需要加載。應(yīng)該等待。

然而，棘手的部分是圖像在完全加載到頁面中之前實際上沒有任何高度。這意味著，如果我們希望延遲加載發(fā)揮作用，我們需要一種方法在加載圖像之前為頁面提供有關(guān)圖像高度的信息。

我們將介紹兩種方法來實現(xiàn)這一目標(biāo)，一種用于固定尺寸圖像，另一種用于響應(yīng)式圖像。通過固定大小來賦予圖像高度是最簡單的方法，因為您只需要添加 height 和 width 屬性。

<img data-normal="images/vulture.jpg" alt="Vulture" height="640" width="960">

登錄后復(fù)制

現(xiàn)在繼續(xù)，使用 data-normal 屬性在腳本標(biāo)記上方添加 img 元素，并包括 height 和width，用于您要加載的每個圖像。

    <img data-normal="images/vulture.jpg" alt="Vulture" height="640" width="960">

    <img data-normal="images/beach.jpg" alt="Beach" height="640" width="960">

    <img data-normal="images/bear.jpg" alt="Bear" height="640" width="960">

    <img data-normal="images/sky.jpg" alt="Sky" height="540" width="960">

    <img data-normal="images/bike.jpg" alt="Bike" height="540" width="960">

登錄后復(fù)制

這種固定大小的方法將允許延遲加載工作，但它會阻止圖像響應(yīng)，這并不理想。稍后我們將介紹如何賦予圖像高度和響應(yīng)能力。

3.設(shè)置加載閾值

默認(rèn)情況下，Layzr 只會引入加載時可見的圖像。不過，如果也預(yù)加載了下一行（位于視口之外）的圖像，則訪問者可以獲得更流暢的體驗。

通過在實例化腳本時設(shè)置名為 threshold 的選項來執(zhí)行此操作。它的工作方式是您將提供一個表示視口高度百分比的值。如果您將值設(shè)置為 100，則表示視口高度的 100%，例如1200 像素。在這種情況下，視口 1200 像素范圍內(nèi)的所有屏幕外內(nèi)容也會被加載。

例如，如果您有兩張大圖像，其中一張被推到視口之外，并且您的閾值設(shè)置為 100，則兩張圖像都會加載：

要設(shè)置閾值，請在代碼中替換此行：

const instance = Layzr()

登錄后復(fù)制

…這樣：

const instance = Layzr({
  threshold: 100
})

登錄后復(fù)制

您可以將此值更改為最適合您創(chuàng)建的網(wǎng)站的值。有趣的是，AMP 的延遲加載閾值似乎大致相當(dāng)于 200。

4. 添加 Retina/HiDPI 圖像

Layzr 的一大優(yōu)點是它可以非常直接地為高分辨率設(shè)備添加圖像。您所需要做的就是包含屬性 data-retina。例如：

<img data-normal="images/vulture.jpg" data-retina="images/[email protected]" alt="Vulture" height="640" width="960">

登錄后復(fù)制

更新 HTML 中的所有 img 元素以包含視網(wǎng)膜圖像，如下所示：

    <img data-normal="images/vulture.jpg" data-retina="images/[email protected]" alt="Vulture" height="640" width="960">

    <img data-normal="images/beach.jpg" data-retina="images/[email protected]" alt="Beach" height="640" width="960">

    <img data-normal="images/bear.jpg" data-retina="images/[email protected]" alt="Bear" height="640" width="960">

    <img data-normal="images/sky.jpg" data-retina="images/[email protected]" alt="Sky" height="540" width="960">

    <img data-normal="images/bike.jpg" data-retina="images/[email protected]" alt="Bike" height="540" width="960">

登錄后復(fù)制

5.響應(yīng)式圖像占位符和回流預(yù)防

使延遲加載的圖像響應(yīng)起來可能是一個棘手的問題。正如我們之前提到的，為了確定何時加載圖像，Layzr 首先需要知道它們的高度。由于響應(yīng)式圖像的尺寸一直在變化，因此它們的高度是不可預(yù)測的。

除此之外，我們還希望在頁面布局中添加一些內(nèi)容來防止回流。重排是指當(dāng)圖像完成加載并從沒有大小到突然占用布局中的空間，導(dǎo)致其周圍的所有內(nèi)容移動時發(fā)生的情況。對于試圖關(guān)注您的內(nèi)容卻讓內(nèi)容在他們的頁面上跳轉(zhuǎn)的訪問者來說，這可能會非常令人沮喪。

我們可以通過在頁面中為每張圖片提供正確尺寸的響應(yīng)式占位符來解決這兩個問題。占位符將確保頁面布局不需要重排，并且還將為 Layzr 提供可使用的高度。我們的方法將基于 Thierry Koblentz 撰寫的這篇關(guān)于“創(chuàng)建視頻內(nèi)在比率”的“A List Apart”文章中的巧妙技術(shù)。

唯一的條件是您需要提前知道發(fā)布的每個圖像的寬高比，因為 CSS 會根據(jù)指定的寬高比調(diào)整圖像的大小。

添加縱橫比包裝器

我們要做的第一件事是在我們的第一個圖像周圍添加一個 div 包裝器 – 這個 div 將成為我們的占位符。我們將使用 CSS 調(diào)整 div 本身的大小，然后設(shè)置其中的圖像以水平和垂直填充它。

我們將為 div 提供一個類名，表示它將包含的圖像的寬高比。在我們的示例中，第一張圖像的寬度為 960 像素，高度為 640 像素，所以讓我們弄清楚它的長寬比是多少。

640（我們的高度）是 960（我們的寬度）的三分之二，這意味著每 2 個單位的高度，圖像就有 3 個單位的寬度。寬高比通常表示為 width:height，如眾所周知的 16:9。我們的第一個示例圖像的比例是 3:2。

為了表示此寬高比，我們將為包裝器 div 指定類名稱 ratio_3_2。

    <div class="ratio_3_2">
      <img data-normal="images/vulture.jpg" data-retina="images/[email protected]" alt="Vulture" height="640" width="960">
    </div>

登錄后復(fù)制

添加標(biāo)準(zhǔn)寬高比樣式

現(xiàn)在我們將添加 CSS 以使這一切正常工作。

在 index.html 文件頭中現(xiàn)有的 <style></style> 標(biāo)記之間，添加以下代碼：

    div[class^="ratio_"]{
      position: relative;
      width: 100%;
    }

登錄后復(fù)制

此選擇器將選取我們的 ratio_3_2 類，但它也會選取以 ratio_ 開頭的任何其他類。這意味著我們可以稍后創(chuàng)建更多類來適應(yīng)不同的寬高比。

在這種樣式中，我們確保包裝器始終拉伸到其父寬度的 100%。我們還將其設(shè)置為 position:relative;，因為這會將圖像絕對定位在其中 – 稍后您就會明白原因。

給出縱橫比包裝高度

現(xiàn)在我們將僅添加特定于我們的 ratio_3_2 類的代碼：

    .ratio_3_2 {
      /*padding-top: calc( 100% * (2 / 3) );*/
      padding-top: 66.666667%;
    }

登錄后復(fù)制

padding-top 值允許我們將包裝 div 保持在我們想要的寬高比。無論 div 的寬度是多少，此填充都會將高度保持在該寬度的 66.666667%（三分之二），從而保持 3:2 的寬高比。

要確定此處放置的百分比，請計算以寬度百分比表示的縱橫比的高度。您可以通過計算來做到這一點：

100% *（高度/寬度）

對于我們的 3:2 比例來說：100% * (2 / 3) =?66.666667%

您可以提前計算所需寬高比的正確百分比，或者如果您愿意，也可以使用 CSS calc() 函數(shù)，如上例中注釋所示：

padding-top: calc( 100% * (2 / 3) );

用圖像填充縱橫比包裝器

無論視口寬度如何，我們的縱橫比包裝器現(xiàn)在都將保持所需的尺寸。所以現(xiàn)在我們要做的就是讓其中包含的圖像填充包裝器，從而繼承它的尺寸。

我們將通過絕對定位嵌套在 ratio_ 類包裝器 div 內(nèi)的任何圖像來實現(xiàn)此目的，將其放置在包裝器的左上角，然后拉伸其高度和寬度均為 100%，如下所示：

    div[class^="ratio_"] > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

登錄后復(fù)制

檢查您的第一張圖像，您現(xiàn)在應(yīng)該看到它拉伸到視口的寬度，但在調(diào)整大小時會縮小以適應(yīng)，并始終保持其縱橫比。

添加額外的縱橫比

您可能擁有各種不同長寬比的圖像，并且您希望能夠適應(yīng)它們。在本教程中我們使用的示例圖像中，前三個圖像的縱橫比為 3:2，但第四個和第五個圖像的縱橫比為 16:9。

為了解決這個問題，請?zhí)砑右粋€根據(jù)寬高比命名的新類，即 ratio_16_9，以及相應(yīng)的 padding-top 值：

    .ratio_16_9 {
      /*padding-top: calc( 100% * (9 / 16) );*/
      padding-top: 56.25%;
    }

登錄后復(fù)制

繼續(xù)在所有其余圖像周圍添加寬高比 div 包裝器，根據(jù)每個圖像的大小使用適當(dāng)?shù)念悺Ｄ€可以從圖像中刪除 height 和 width 屬性，因為它們現(xiàn)在都將被我們的 CSS 覆蓋。

    <div class="ratio_3_2">
      <img data-normal="images/vulture.jpg" data-retina="images/[email protected]" alt="Vulture">
    </div>

    <div class="ratio_3_2">
      <img data-normal="images/beach.jpg" data-retina="images/[email protected]" alt="Beach">
    </div>

    <div class="ratio_3_2">
      <img data-normal="images/bear.jpg" data-retina="images/[email protected]" alt="Bear">
    </div>

    <div class="ratio_16_9">
      <img data-normal="images/sky.jpg" data-retina="images/[email protected]" alt="Sky">
    </div>

    <div class="ratio_16_9">
      <img data-normal="images/bike.jpg" data-retina="images/[email protected]" alt="Bike">
    </div>

登錄后復(fù)制

重新加載瀏覽器預(yù)覽并調(diào)整視口大小：您現(xiàn)在應(yīng)該發(fā)現(xiàn)所有圖像都有響應(yīng)，同時保留其延遲加載功能，沒有回流。

6.添加srcset

Layzr 還支持 srcset 屬性。在支持 srcset 的瀏覽器中，它將優(yōu)先于 data-normal 和 data-retina

使用。

但是，不應(yīng)使用直接的 srcset 屬性，而是應(yīng)該在其前面加上 data- ，就像我們迄今為止使用的其他屬性一樣。

將第一張圖像的代碼更新為：

<img 
  data-normal="images/vulture.jpg"
  data-retina="images/[email protected]"
  alt="Vulture"
  data-srcset="images/vulture_sml.jpg 320w, images/vulture_med.jpg 640w, images/vulture.jpg 960w">

登錄后復(fù)制

要查看此效果，請轉(zhuǎn)到瀏覽器預(yù)覽，將視口縮小到 320 像素寬以下，重新加載并觀看網(wǎng)絡(luò)面板。您應(yīng)該首先看到圖像加載的最小版本。然后增加視口的大小，您應(yīng)該會看到中型和大型版本隨您加載。

源文件中提供的圖像文件夾包括每個圖像的小、中、大版本。更新您的代碼以在 data-srcset 屬性中使用所有這些內(nèi)容，如下所示：

    <div class="ratio_3_2">
      <img data-normal="images/vulture.jpg" data-retina="images/[email protected]" alt="Vulture" data-srcset="images/vulture_sml.jpg 320w, images/vulture_med.jpg 640w, images/vulture.jpg 960w">
    </div>

    <div class="ratio_3_2">
      <img data-normal="images/beach.jpg" data-retina="images/[email protected]" alt="Beach" data-srcset="images/beach_sml.jpg 320w, images/beach_med.jpg 640w, images/beach.jpg 960w">
    </div>

    <div class="ratio_3_2">
      <img data-normal="images/bear.jpg" data-retina="images/[email protected]" alt="Bear" data-srcset="images/bear_sml.jpg 320w, images/bear_med.jpg 640w, images/bear.jpg 960w">
    </div>

    <div class="ratio_16_9">
      <img data-normal="images/sky.jpg" data-retina="images/[email protected]" alt="Sky" data-srcset="images/sky_sml.jpg 320w, images/sky_med.jpg 640w, images/sky.jpg 960w">
    </div>

    <div class="ratio_16_9">
      <img data-normal="images/bike.jpg" data-retina="images/[email protected]" alt="Bike" data-srcset="images/bike_sml.jpg 320w, images/bike_med.jpg 640w, images/bike.jpg 960w">
    </div>

登錄后復(fù)制

添加加載動畫

我們快完成了，但為了創(chuàng)建最后一層潤色，我們將添加一個加載動畫。這將有助于向訪問者傳達(dá)布局的哪些部分充當(dāng)圖像占位符，以及這些圖像正在加載的過程。

我們將使用純 CSS 加載器，這是 Alan Shortis 編寫的這款出色筆的略微修改版本：https://codepen.io/alanshortis/pen/eJLVXr

為了避免需要任何額外的標(biāo)記，我們將把加載動畫包含在附加到每個寬高比包裝器的 :after psuedo 元素中。將以下內(nèi)容添加到您的 CSS 中：

    div[class^="ratio_"]:after {
      content: '';
      display: block;
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      border: .5rem double #444;
      border-left: .5rem double white;
      position: absolute;
      top: calc(50% - 2rem);
      left: calc(50% - 2rem);
      animation: spin 0.75s infinite linear;
    }
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

登錄后復(fù)制

上面的代碼創(chuàng)建了一個小圓形加載器圖標(biāo)，將其居中，并使其每 0.75 秒旋轉(zhuǎn) 360 度。

我們還將在長寬比包裝器中添加深灰色背景顏色，以便輕松將它們與布局的其余部分區(qū)分開來。添加此 background-color: #333;?行，如下所示：

    div[class^="ratio_"]{
      position: relative;
      width: 100%;
      background-color: #333;
    }

登錄后復(fù)制

最后，我們只需要確保我們的加載程序不會將自身定位在圖像的頂部。為此，我們將行 z-index: 1; 添加到我們的圖像中，將它們移動到加載器頂部的一層：

    div[class^="ratio_"] > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

登錄后復(fù)制

現(xiàn)在刷新您的頁面，您應(yīng)該會看到正在運行的加載動畫。

您的最終代碼

完成上述所有操作后，您的代碼現(xiàn)在應(yīng)如下所示：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Layzr.js Lazy Loading</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style>
    body {
      margin: 0;
    }
    img {
      display: block;
      margin: 0 auto;
    }

    div[class^="ratio_"]{
      position: relative;
      width: 100%;
      background-color: #333;
    }
    .ratio_3_2 {
      /*padding-top: calc( 100% * (2 / 3) );*/
      padding-top: 66.666667%;
    }
    .ratio_16_9 {
      /*padding-top: calc( 100% * (9 / 16) );*/
      padding-top: 56.25%;
    }

    div[class^="ratio_"] > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    div[class^="ratio_"]:after {
      content: '';
      display: block;
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      border: .5rem double #444;
      border-left: .5rem double white;
      position: absolute;
      top: calc(50% - 2rem);
      left: calc(50% - 2rem);
      animation: spin 0.75s infinite linear;
    }
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    </style>
  </head>
  <body>
    <h1>Welcome to the lazy loaded web</h1>

    <div class="ratio_3_2">
      <img data-normal="images/vulture.jpg" data-retina="images/[email protected]" alt="Vulture" data-srcset="images/vulture_sml.jpg 320w, images/vulture_med.jpg 640w, images/vulture.jpg 960w">
    </div>

    <div class="ratio_3_2">
      <img data-normal="images/beach.jpg" data-retina="images/[email protected]" alt="Beach" data-srcset="images/beach_sml.jpg 320w, images/beach_med.jpg 640w, images/beach.jpg 960w">
    </div>

    <div class="ratio_3_2">
      <img data-normal="images/bear.jpg" data-retina="images/[email protected]" alt="Bear" data-srcset="images/bear_sml.jpg 320w, images/bear_med.jpg 640w, images/bear.jpg 960w">
    </div>

    <div class="ratio_16_9">
      <img data-normal="images/sky.jpg" data-retina="images/[email protected]" alt="Sky" data-srcset="images/sky_sml.jpg 320w, images/sky_med.jpg 640w, images/sky.jpg 960w">
    </div>

    <div class="ratio_16_9">
      <img data-normal="images/bike.jpg" data-retina="images/[email protected]" alt="Bike" data-srcset="images/bike_sml.jpg 320w, images/bike_med.jpg 640w, images/bike.jpg 960w">
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/layzr.js/2.0.2/layzr.min.js"></script>
    <script>
    const instance = Layzr()

    document.addEventListener('DOMContentLoaded', function(event){
      instance.update().check().handlers(true)
    })
    </script>

  </body>
</html>

登錄后復(fù)制