React實現圖片懶加載的常見方式

更新時間：2024年01月09日 08:23:49 作者：Mh

圖片懶加載是一種優(yōu)化網頁性能的技術,它允許在用戶滾動到圖片位置之前延遲加載圖片,通過懶加載,可以在用戶需要查看圖片時才加載圖片,避免了不必要的圖片加載,本文給大家介紹了React實現圖片懶加載的常見方式,需要的朋友可以參考下

前言

圖片懶加載是一種優(yōu)化網頁性能的技術，它允許在用戶滾動到圖片位置之前延遲加載圖片。通過懶加載，可以在用戶需要查看圖片時才加載圖片，避免了不必要的圖片加載，從而提高了網頁的加載速度和用戶體驗。

方案一

實現思路

在說明思路之前，先了解幾個常見的視圖屬性。

clientHeight：可視區(qū)域的高度，對應的也就是下圖中的滾動區(qū)域。
scrollTop：滾動條滾動的高度，它指的是內容區(qū)的頂部到可視區(qū)域頂部的距離。
offsetTop：元素到offsetParent頂部的距離。
offsetParent：距離元素最近的一個具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合條件，offsetParent為body。

圖解：

根據上面的圖解可知，當圖片的滾動條滾動的高度加上可視區(qū)域的高度大于當前的圖片的offsetTop，那么說明圖片正在進入可視區(qū)域。這個時候便可以加載當前圖片。

第一步

模擬后臺返回的圖片url，遍歷產生一個url集合，用于后面的懶加載使用。

const imgUrls = (num = 10) => {
  const urls = [];
  for (let i = 0; i < num; i++) {
    const url = `https://robohash.org/${i}.png`;
    urls.push(url);
  }
  return urls;
};

第二步

遍歷圖片url集合，渲染100張loading圖片，css部分省略。

    <div className={styles['box-one']} ref={scrollRef}>
      {imgUrls(100).map((item) => {
        return <img data-src={item} key={item} src={loadingUrl} alt="" />;
      })}
    </div>

效果預覽

第三步

監(jiān)聽容器的滾動事件，當容器滾動時計算容器的高度加上滾動條的高度大于當前圖片的offsetTop時加載當前的圖片。完整代碼如下：

import loadingUrl from '@/assets/imgs/loading.jpg';
import { useEffect, useRef } from 'react';
import styles from '../index.less';

// 圖片url
const imgUrls = (num = 10) => {
  const urls = [];
  for (let i = 0; i < num; i++) {
    const url = `https://robohash.org/${i}.png`;
    urls.push(url);
  }
  return urls;
};

const LazyLoading = () => {
  const scrollRef = useRef({} as any);

  // 滾動事件
  const changeScroll = () => {
    const clientHeight = scrollRef?.current.clientHeight; //可視區(qū)域高度
    const scrollTop = scrollRef?.current.scrollTop; //滾動條滾動高度
    const childNodes = scrollRef?.current.childNodes; // 獲取所有圖片集合

    for (let j = 0; j < childNodes.length; j++) {
      const element = childNodes[j];
      if (scrollTop + clientHeight > element.offsetTop) {
        element.src = element.getAttribute('data-src'); // 替換當前的src
      }
    }
  };

  useEffect(() => {
    changeScroll(); // 第一次渲染的時候替換loading圖片
  }, []);

  return (
    <div className={styles['box-one']} ref={scrollRef} onScroll={changeScroll}>
      {imgUrls(100).map((item) => {
        return <img data-src={item} key={item} src={loadingUrl} alt="" />;
      })}
    </div>
  );
};

export default LazyLoading;

效果預覽

方案二

實現思路

方案二的實現思路利用瀏覽器提供的 IntersectionObserver API實現。IntersectionObserver API提供了一種方便的方式來監(jiān)視目標元素和其祖先元素或視窗之間的交叉狀態(tài)變化。當目標元素進入或離開視口時，可以觸發(fā)回調函數，進行相應的操作。它的原理是通過注冊一個回調函數來觀察特定元素的交叉狀態(tài)變化，并在滿足條件時執(zhí)行相應的操作。

使用 IntersectionObserver API非常簡單，可以通過創(chuàng)建一個 IntersectionObserver 實例，并傳入回調函數和選項對象來實現。回調函數會在目標元素的交叉狀態(tài)發(fā)生變化時被調用，并接收一個參數，包含有關交叉狀態(tài)的信息。

實現完整代碼

import loadingUrl from '@/assets/imgs/loading.jpg';
import styles from '../index.less';
import React, { useRef, useEffect, useState } from 'react';
// 圖片url
const imgUrls = (num = 10) => {
  const urls = [];
  for (let i = 0; i < num; i++) {
    const url = `https://robohash.org/${i}.png`;
    urls.push(url);
  }
  return urls;
};

const LazyLoadImage = ({ src, alt }) => {
  const [imageSrc, setImageSrc] = useState(loadingUrl);
  const imgRef = useRef(null as any);

  useEffect(() => {
    let observer: IntersectionObserver;
    if (imgRef.current) {
      // 創(chuàng)建IntersectionObserver實例
      observer = new IntersectionObserver(
        ([entry]) => {
          // 當圖片進入可視區(qū)域時，設置圖片地址進行加載
          if (entry.isIntersecting) {
            setImageSrc(src);
            observer.unobserve(imgRef.current);
          }
        },
        {
          rootMargin: '0px 0px 200px 0px', // 可視區(qū)域的上邊距設置為200px
        },
      );
      observer.observe(imgRef.current); //開始觀察目標元素
    }
    return () => {
      if (observer && observer.unobserve) {
        observer.unobserve(imgRef.current);
      }
    };
  }, [src]);

  return <img ref={imgRef} src={imageSrc} alt={alt} />;
};

const LazyLoading = () => {
  return (
    <div className={styles['box-two']}>
      {imgUrls(100).map((item) => {
        return <LazyLoadImage src={item} alt="lazy load image" />;
      })}
    </div>
  );
};

export default LazyLoading;

實現效果

注意事項

在初始化的時候，需要給imageSrc設置一個初始化的loading地址，如果沒有的話，初始化的時候會加載多張圖片。

方案三

實現思路

利用react的懶加載庫react-lazyload，在使用之前需要先安裝 yarn add react-lazyload，這里介紹幾個它的常見屬性：

scrollContainer: 指定的滾動的區(qū)域，默認值是undefined，如果沒有指定默認是窗口的視圖作為滾動區(qū)域。
offset: 元素距離視口頂部的距離，當達到這個距離時，元素將被加載。
scroll: 是否監(jiān)聽滾動
height: 渲染元素的占位符的高度。
overflow : 如果溢出容器，延遲加載組件

代碼實現

因為這里實現的圖片懶加載是局部懶加載，所以需要指定 scrollContainer，scrollContainer 的值DOM對象。在實現的過程中，同時需要設置overflow為true，以及height的值。

import react, { useRef, useEffect } from 'react';
import LazyLoad from 'react-lazyload';
import styles from '../index.less';

// 圖片url
const imgUrls = (num = 10) => {
  const urls = [];
  for (let i = 0; i < num; i++) {
    const url = `https://robohash.org/${i}.png`;
    urls.push(url);
  }
  return urls;
};

const LazyLoading = () => {
  const scrollRef = useRef({} as any);

  return (
    <div className={styles['box-three']} ref={scrollRef}>
      {imgUrls(100).map((item) => {
        return (
          <LazyLoad
            height={200}
            overflow={true}
            offset={0}
            key={item}
            scroll={true}
            scrollContainer={scrollRef.current} // DOM
          >
            <img src={item} alt="" />
          </LazyLoad>
        );
      })}
    </div>
  );
};

export default LazyLoading;