5種延遲加載圖像的方法以幫助你提升網站性能與用戶體驗

英文 | https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/

翻譯 | web前端開發(ID:web_qdkf)

由於圖像是Web上最流行也是必不可少的內容類型之一,因此網站上的圖片頁面加載時間很容易成爲一個問題。

即使進行了適當的優化,圖像也可能佔很大的比重。這可能會對訪問網站的用戶造成一定的負面影響,因爲你的用戶必須等待一段時間才能訪問你網站上的內容。除非你想出一種不會干擾速度感知的圖像加載解決方案,否則它們很可能會失去耐心,而去其他地方尋找他們所需要的內容。

在本文中,你將瞭解5種延遲加載圖像的方法,可以將它們添加到Web優化工具包中以改善網站上的用戶體驗。

什麼是延遲加載?

延遲加載圖像是指異步加載網站上的圖像,也就是說,在首屏內容完全加載後,甚至有條件地,僅當它們出現在瀏覽器的視口中時。這意味着,如果用戶沒有完全向下滾動,則位於頁面底部的圖像甚至都不會被加載。

許多網站都使用這種方法,但是在圖片繁多的網站上尤其明顯。嘗試瀏覽你最喜歡的在線網站以獲得高分辨率照片,你很快就會意識到該網站僅加載有限數量的圖像的方式。向下滾動頁面時,你會看到佔位符圖像迅速填充真實圖像進行預覽。

例如,請注意Unsplash.com上的加載程序:將頁面的該部分滾動到視圖中會觸發使用全分辨率照片替換佔位符:

爲什麼要關心延遲加載圖像?

至少有兩個極好的原因,你應該考慮爲網站延遲加載圖像:

  • 如果你的網站使用JavaScript來顯示內容或向用戶提供某種功能,則快速加載DOM變得至關重要。腳本通常要等到DOM完全加載後才能開始運行。在包含大量圖像的網站上,延遲加載(或異步加載圖像)可能會導致用戶停留或離開你的網站有所不同。

  • 由於大多數惰性加載解決方案都是通過僅在用戶滾動到在視口內可見圖像的位置時才加載圖像來工作的,因此如果用戶從未到達該點,則將永遠不會加載這些圖像。這意味着可以節省大量帶寬,爲此,大多數用戶,特別是那些在移動設備上訪問Web且連接緩慢的用戶,將非常感謝你。

好吧,延遲加載圖像有助於提高網站性能,但是最好的解決方法是什麼?

沒有完美的方法。

如果你使用JavaScript,那麼實現自己的延遲加載解決方案就不會成爲問題。沒有什麼比你自己編寫代碼給你更多的控制權了。

或者,你可以瀏覽Web以找到可行的方法並開始進行試驗。我就是這樣做的,並且遇到了這5種有趣的技術。

1、本機延遲加載

圖像和iframe的本機延遲加載非常酷。沒有什麼比下面的標記更直接了:

<img src="myimage.jpg" loading="lazy" alt="..." /><iframe src="content.html" loading="lazy"></iframe>

如你所見,沒有JavaScript,沒有src屬性值的動態交換,只是普通的HTML。

該loading屬性使我們可以選擇延遲屏幕外圖像和iframe,直到用戶滾動到頁面上的位置爲止。loading可以採用以下三個值之一:

  • lazy:非常適合延遲加載

  • eager:指示瀏覽器立即加載指定的內容

  • auto:保留延遲加載或不延遲加載到瀏覽器的選項。

這種方法無可匹敵:它的開銷爲零,簡潔明瞭。但是,儘管在撰寫本文時,大多數主流瀏覽器都對該loading屬性提供了良好的支持,但並不是所有瀏覽器都支持該特性。

要獲得有關此令人敬畏的延遲加載圖像功能的深入文章,包括瀏覽器支持的解決方法,請不要錯過Addy Osmani的“ Web的本地圖像延遲加載!”。

2、使用Interp Observer API的延遲加載

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

MDN引入此API的方法如下:

Interp Observer API提供了一種異步觀察目標元素與祖先元素或頂級文檔的視口相交的變化的方法。

換句話說,異步監視的是一個元素與另一個元素的交集。

Denys Mishunov在“相交觀察器”和使用它的延遲加載圖像方面都有很好的教程。這就是他的解決方案。

假設你要延遲加載圖片庫。每個圖像的標記如下所示:

<img src="image.jpg" alt="test image">

請注意,圖像的路徑是如何包含在src屬性(而不是src屬性)中的。原因是使用src意味着圖像將立即加載,這不是你想要的。

在CSS中,爲每個圖像賦予一個min-height值,例如100px。這爲每個圖像佔位符(不帶src屬性的img元素)提供了一個垂直尺寸:

img {  min-height: 100px;  /* more styles here */}

然後,在JavaScript文檔中,創建一個config對象並將其註冊到interpObserver實例:

// create config object: rootMargin and threshold// are two properties exposed by the interfaceconst config = {  rootMargin: '0px 0px 50px 0px',  threshold: 0};
// register the config object with an instance// of interpObserverlet observer = new interpObserver(function(entries, self) {  // iterate over each entry  entries.forEach(entry => {    // process just the images that are intersecting.    // isIntersecting is a property exposed by the interface    if(entry.isIntersecting) {      // custom function that copies the path to the img      // from src to src      preloadImage(entry.target);      // the image is now in place, stop watching      self.unobserve(entry.target);    }  });}, config);

最後,你遍歷所有圖像並將它們添加到此iterationObserver實例中:

const imgs = document.querySelectorAll('[src]');imgs.forEach(img => {  observer.observe(img);});

該解決方案的優點:實施起來輕而易舉,有效,並且interpObserver在計算方面做得很繁重。

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

3 、Lozad.js

實現圖像的延遲加載的一種快速簡便的替代方法是讓JS庫爲你完成大部分工作。

Lozad是純JavaScript中的高性能,輕量且可配置的惰性加載器,沒有任何依賴關係。你可以使用它來延遲加載圖像,視頻,iframe和更多內容,並且它使用Interp Observer API。

你可以將Lozad包含在npm / Yarn中,並使用所選的模塊捆綁器將其導入:

npm install --save lozadyarn add lozad
import lozad from 'lozad';

另外,你可以簡單地使用CDN下載該庫並將其添加到HTML頁面底部的< script>標記中:

<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

接下來,對於基本實現,將lozad類添加到標記中的資產:

<img class="lozad" src="img.jpg">

最後,在你的JS文檔中實例化Lozad:

const observer = lozad();observer.observe();

你將在Lozad GitHub存儲庫中找到有關如何使用該庫的所有詳細信息。

如果你不想深入瞭解Interp Observer API的工作原理,或者只是在尋找適用於各種內容類型的快速實現,則Lozad是一個不錯的選擇。

僅注意瀏覽器支持,並最終將此庫與用於Interp Observer API的polyfill集成。

4、延遲加載具有模糊的圖像效果

你首先看到的是圖像的模糊,低分辨率副本,而其高分辨率版本則被延遲加載:

你可以通過多種方式來延遲加載具有這種有趣的模糊效果的圖像。

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

  • 性能:僅463字節的CSS和1,007字節的最小JavaScript代碼

  • 支持視網膜屏幕

  • 無依賴關係:不需要jQuery或其他庫和框架

  • 逐步增強功能以抵消較舊的瀏覽器和JavaScript失敗

5、 Yall.js

Yall是功能豐富的延遲加載腳本,用於圖像,視頻和iframe。更具體地說,它使用Interp Observer API並在必要時巧妙地使用傳統的事件處理程序技術。

在文檔中包含Yall時,需要按以下方式對其進行初始化:

<script src="yall.min.js"></script><script>  document.addEventListener("DOMContentLoaded", yall);</script>

接下來,要延遲加載一個簡單的img元素,在標記中需要做的就是:

<img class="lazy" src="placeholder.jpg" src="image-to-lazy-load.jpg" alt="Alternative text to describe image.">

請注意以下幾點:

  • 你將懶惰的類添加到元素

  • src的值是一個圖像佔位符

  • 你要延遲加載的圖像的路徑在src屬性內部

Yall的好處包括:

  • Interp Observer API的出色性能

  • 出色的瀏覽器支持(可回溯到IE11)

  • 無需其他依賴項

結論

以上就是我分享的關於延遲加載圖像的5種方法,你可以開始在項目中進行試驗和測試。如果你還有更好的方法,也可以給我留言,我們一起學習進步,最後,感謝你的閱讀。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章