React项目中使用lazysizes无法正常实现图片懒加载的问题求助

• lazysizes默认预加载阈值过大：默认会预加载距离视口300~500px范围内的图片，用于提升滚动体验，若测试图片距离视口的距离小于该值，就会出现未滚动到就提前加载的情况。
• 与React渲染逻辑不兼容：lazysizes是原生DOM库，默认会在页面加载完成后自动扫描全页.lazyload元素。而React是异步渲染虚拟DOM，若图片在lazysizes自动初始化完成后才渲染到页面，lazysizes无法正确监听滚动位置，会直接替换所有data-src为真实地址，导致提前加载。
• 图片标签缺少必要控制属性：未针对单张图片设置预加载阈值，也没有原生懒加载属性做兜底。

步骤1：调整lazysizes全局配置 #

在引入lazysizes之前先声明全局配置，关闭自动初始化、缩小预加载阈值：

// 这段代码要放在import lazysizes的语句之前
window.lazySizesConfig = window.lazySizesConfig || {};
// 预加载距离设为0，仅图片进入视口才加载
window.lazySizesConfig.expand = 0;
// 关闭自动初始化，由React控制初始化时机
window.lazySizesConfig.init = false;

步骤2：在React中手动控制初始化时机 #

在根组件挂载完成后再初始化lazysizes，若存在动态新增图片的场景（比如分页加载），每次新数据渲染完成后调用扫描方法：

import { useEffect } from 'react';
import 'lazysizes';

function App() {
  // 根组件挂载后初始化lazysizes
  useEffect(() => {
    window.lazysizes.init();
  }, []);

  // 如有动态新增图片的需求，新增数据渲染完成后调用扫描方法
  // useEffect(() => {
  //   window.lazysizes.poll();
  // }, [你动态渲染的列表数据]);

  // 其余业务逻辑
}

步骤3：补全img标签属性 #

给图片标签新增预加载阈值控制和原生懒加载兜底属性：

const id = Math.floor(Math.random() * 500);

<img
  style={{ width: 500, height: 500 }}
  src={`https://picsum.photos/id/${id}/20`}
  data-src={`https://picsum.photos/id/${id}/1000`}
  // 单张图片的预加载距离，优先级高于全局配置
  data-expand="0"
  className="lazyload blur-up"
  alt=""
  // 原生懒加载属性做兜底
  loading="lazy"
/>

你原有CSS代码无需调整，修改完成后即可实现真实的视口进入才加载大图的效果。

内容的提问来源于stack exchange，提问作者benmneb