小編精選 - 技術文章翻譯 · 07月11日

React 與圖片延遲載入

簡介🔊

你好世界！ 🌎

從現在開始，我想開始一個名為React optimization新系列。我們將討論有助於增強 React 應用程式效能的不同 React 最佳化技術。

今天的主題是IMAGE LAZY LOADING 🔥

我們都知道，應用程式渲染後，資源（圖像）將需要一些時間來載入。擁有更多資產會導致加載應用程式的時間更長。它會影響應用程式的效能。為了避免這個效能問題，我們可以僅在需要時（需要顯示）載入圖像。假設我們在頁面頂部有一張圖像，在頁面底部有另一張圖像。最初，我們需要渲染頂部的圖像。稍後，當我們僅到達（滾動）該特定部分時，我們需要渲染底部圖像。它有助於減少應用程式的初始渲染時間並僅在需要時消耗資料。

優點🔊

🔴更快的初始載入時間：透過延遲載入不立即可見的映像，可以減少初始頁面載入時間。這將帶來更快、更靈敏的用戶體驗。

🟠 減少頻寬使用：僅載入實際需要的映像，從而減少整體頻寬消耗。這對於使用行動裝置或資料計劃有限的用戶尤其有利。

🟡 更平滑的滾動：延遲加載圖像可確保圖像在用戶滾動時加載，從而防止因圖像加載過重而導致卡頓或滯後的滾動體驗。

🟢 內容優先：可以先載入關鍵內容和功能，從而提高感知效能和使用者參與度。

🔵 改進的搜尋引擎排名：搜尋引擎青睞載入速度更快的網站，這可以對您網站的搜尋引擎排名產生正面影響。

🟣 降低跳出率：更快的載入時間可以降低跳出率，因為使用者更有可能留在載入速度快的網站上。

⚫️減少伺服器負載：透過僅載入必要的映像，可以減少伺服器負載和資源使用，從而潛在地降低託管成本。

⚪️ 大型圖片庫：對於具有大量圖片庫或內容較多的頁面的應用程式，延遲加載有助於確保性能保持最佳狀態。

🟤 漸進式增強：隨著影像逐漸加載，網路連線速度較慢或裝置功能較差的使用者仍可獲得功能性和響應式的體驗。

方法🔊

import React from "react";

function ImageLoading() {
  return (
    <div>
      <div style={{ height: "120vh" }}></div>
      <img src="https://picsum.photos/700" loading='lazy'/>
      <br />
      <img src="https://picsum.photos/800"  loading='lazy'/>
      <br />
      <img src="https://picsum.photos/900"  loading='lazy'/>
      <br />
      <img src="https://picsum.photos/1000"  loading='lazy'/>
      <br />
    </div>
  );
}

export default ImageLoading;

如果我們透過平滑滾動來觀察瀏覽器網絡，我們就可以觀察到資產根據滾動進行呼叫。但不是一次渲染所有影像。

📌注意：上述方法並不適用於所有瀏覽器。所以我們需要安裝外部 npm 套件來實現這一點。

安裝 npm 套件react-lazy-load-image-component

現在我們可以使用上面的套件來實現我們的圖像延遲載入。

import React from "react";
import { LazyLoadImage } from "react-lazy-load-image-component";
import 'react-lazy-load-image-component/src/effects/blur.css';

function ImageLoading() {
  return (
    <div>
      <div style={{ height: "120vh" }}></div>
      <LazyLoadImage src="https://picsum.photos/700" />
      <br />
      <LazyLoadImage src="https://picsum.photos/800" />
      <br />
      <LazyLoadImage src="https://picsum.photos/900" />
      <br />
      <LazyLoadImage src="https://picsum.photos/1000" />
      <br />
    </div>
  );
}

export default ImageLoading;

react-lazy-load-image-component是有助於實現映像延遲載入的優秀函式庫之一。該軟體包還有一些其他功能，但我們現在不討論它們。您可以在 npm 網站上查看這些內容。

📌注意：儘管映像延遲載入是增強應用程式效能的最佳概念，但它有一些限制，例如在實現輪播和首屏時最好避免。它影響用戶體驗。

結論🔊

我希望你們喜歡這個概念。我們將在下一篇文章中討論下一個概念。

和平 🙂

原文出處：https://dev.to/sundarbadagala081/image-lazy-loading-31jb

0個讚 0留言 204瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

小編精選 - 技術文章翻譯

精選技術文章翻譯，幫助開發者持續吸收新知。