分享一個思路，Js原生語言，判斷當前可視區域的具體位置，再透過滾動事件來判斷哪個節點該載入圖片了。原生懶載入技術不難。不過還有像jQuery.lazyload.js這樣的輪子可以用，搜一下，教程一大堆

由於影象是Web上最流行的內容之一，因此網站上的頁面載入時間很容易成為問題。

即使進行了適當的最佳化，影象也可能佔很大的比重。這可能會對訪問者必須等待才能訪問您網站上的內容的時間產生負面影響。除非您想出一種不會干擾速度感知的影象載入解決方案，否則它們很可能會耐心地在其他地方導航。

在本文中，您將瞭解四種延遲載入影象的方法，可以將它們新增到Web最佳化工具包中以改善網站上的使用者體驗。

什麼是延遲載入？

延遲載入影象是指非同步載入網站上的影象-也就是說，在完全容納首屏內容之後，甚至有條件地，僅當它們出現在瀏覽器的視口中時才可以載入影象。這意味著，如果使用者沒有完全向下滾動，則位於頁面底部的影象甚至都不會被載入。

許多網站都使用這種方法，但是在圖片繁多的網站上尤其明顯。嘗試瀏覽您喜歡的線上狩獵場以獲得高解析度照片，您很快就會意識到該網站僅載入有限數量的影象的方式。向下滾動頁面時，您會看到佔位符影象迅速填充真實影象進行預覽。例如，請注意Unsplash.com上的載入程式：將頁面的該部分滾動到檢視中會觸發使用全解析度照片替換佔位符：

為什麼要關心延遲載入影象？

至少有兩個極好的原因，您應該考慮為網站延遲載入影象：

如果您的網站使用JavaScript來顯示內容或向用戶提供某種功能，則快速載入DOM變得至關重要。指令碼通常要等到DOM完全載入後才能開始執行。在包含大量影象的網站上，延遲載入（或非同步載入影象）可能會導致使用者停留或離開您的網站有所不同。由於大多數延遲載入解決方案都是透過僅在使用者滾動到在視口內可見影象的位置時才載入影象來工作的，因此如果使用者從未到達該點，則將永遠不會載入這些影象。這意味著可以節省大量頻寬，為此，大多數使用者，尤其是那些在移動裝置上訪問網路和連線緩慢的使用者，將非常感謝您。

好吧，延遲載入影象有助於提高網站效能，但是最好的解決方法是什麼？

沒有完美的方法。如果您很會使用JavaScript，那麼實現自己的延遲載入解決方案就不會成為問題。沒有什麼比您自己編寫程式碼給您更多的控制了。

或者，您可以瀏覽網路以找到可行的方法並開始進行試驗。我就是這樣做的，並且遇到了這五種有趣的技術。

使用Intersection Observer API的延遲載入

該路口觀察API是一個現代化的介面，你可以利用的延遲載入圖片和其他內容。

換句話說，被非同步監視的是一個元素與另一個元素的交集。

Denys Mishunov在Intersection Observer和使用它延遲載入影象方面都有很好的教程。這就是他的解決方案。

假設您要延遲載入圖片庫。每個影象的標記如下所示：

請注意，影象的路徑是如何包含在data-src屬性（而不是src屬性）中的。原因是使用src意味著影象將立即載入，這不是您想要的。

在CSS中，為每個影象賦予一個min-height值，例如100px。這為每個影象佔位符（不帶src屬性的img元素）提供一個垂直尺寸。

該解決方案的優點：實現起來輕而易舉，非常有效，並且使crossObserver可以在計算方面進行繁重的工作。

另一方面，儘管大多數瀏覽器都支援Intersection Observer API最新版本，但並非所有瀏覽器都始終支援它。幸運的是，可以使用polyfill。

羅賓·奧斯本（Robin Osborne）逐漸增強的延遲載入

羅賓•奧斯本（Robin Osborne）提出了一種基於漸進增強的超級巧妙的解決方案。在這種情況下，使用JavaScript實現的延遲載入本身被認為是對常規HTML和CSS的增強。

為什麼要逐步增強？好吧，如果您使用基於JavaScript的解決方案顯示影象，如果禁用了JavaScript或發生了導致指令碼無法按預期工作的錯誤，該怎麼辦？在這種情況下，如果不進行逐步增強，使用者可能根本看不到任何影象。

你可以看到奧斯本的這一解決方案的一個基本版本的細節筆，以及更全面的一個，它考慮到情況下破的JavaScript，在這種其它這裡筆。

此技術具有許多優點：

漸進增強方法可確保使用者始終可以訪問內容。它不僅可以解決無法使用JavaScript的情況，而且還可以解決JavaScript 損壞的情況：我們都知道容易出錯的指令碼，尤其是在執行大量指令碼的環境中。它會懶惰地滾動載入影象，因此，如果使用者未滾動到瀏覽器中的位置，則不會載入所有影象。它不依賴任何外部依賴關係，因此不需要框架或外掛。Lozad.js

實現影象的延遲載入的一種快速簡便的替代方法是讓JS庫為您完成大部分工作。

Lozad是純JavaScript中的高效能，輕量且可配置的惰性載入器，沒有任何依賴關係。您可以使用它來延遲載入影象，影片，iframe等，並且它使用Intersection Observer API。

您可以將Lozad包含在npm / Yarn中，並使用所選的模組捆綁器將其匯入。

延遲載入具有模糊的影象效果

您首先看到的是影象的模糊，低解析度副本，而其高解析度版本則被延遲載入：

網站上的佔位符影象模糊。

網站上的高解析度，延遲載入的影象。

您可以透過多種方式來延遲載入具有這種有趣的模糊效果的影象。

我最喜歡的技術是Craig Buckler。這是此解決方案的全部優點：

效能：僅463位元組的CSS和1,007位元組的最小JavaScript程式碼支援視網膜螢幕無依賴關係：不需要jQuery或其他庫和框架逐步增強功能以抵消較舊的瀏覽器和JavaScript失敗到此為止，您可以採用以上這四種延遲載入影象的方法來開始嘗試並在專案中進行測試，可以大大提高讀者的使用者體驗和閱讀興趣。

可以在dom頁面載入完成後的onload中依次載入圖片資源，如果有些不屬於使用者可視範圍內的dom，則可以等到進入可視範圍後再載入圖片。