react-lazy-load-image-component异常：所有图片一次性加载问题求助

你的问题出在几个细节上，直接修改以下几点就能实现正确的懒加载：

问题原因 #

1. 同时使用了组件的懒加载逻辑和原生HTML的loading='lazy'属性，两者发生冲突，导致组件的懒加载失效。
2. 图片容器未设置合适高度，浏览器渲染时可能误判所有图片都处于可视范围内。

修复步骤 #

• 移除原生loading='lazy'属性：react-lazy-load-image-component自身已实现懒加载逻辑，原生属性会干扰它的判断。
• 添加threshold属性：自定义触发图片加载的距离（比如距离视口200px时开始加载），避免提前加载所有图片。
• 给图片设置固定高度（可选但推荐）：让浏览器能正确计算图片位置，确保不在视口内的图片不会被提前加载。

修改后的代码 #

import { useState, useEffect } from 'react'
import { LazyLoadImage } from 'react-lazy-load-image-component';
import 'react-lazy-load-image-component/src/effects/blur.css';

function App() {
  const [images, setImages] = useState([]);
  const url = "https://api.unsplash.com/photos/?client_id=9MRdzVycZVHXD5HX93lbynQl8ZCj3_rrV5LSJSuEp4o&query=nature&per_page=30";

  useEffect(() => {
    fetch(url)
    .then(res => res.json())
    .then(data => setImages(data))
  }, [])

  return (
    <>
      <div style={{display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "10px"}}>
        {
          images.map(image => (
            <LazyLoadImage
              effect='blur'
              src={image.urls.regular}
              alt={image.alt_description} 
              key={image.id}
              width="100%"
              height="200px" // 设置固定高度，帮助浏览器判断位置
              threshold={200} // 距离视口200px时加载图片
              style={{objectFit: "cover"}} // 保持图片比例
            />
          ))
        }
      </div>
    </>
  )
}

export default App

额外验证 #

修改后滚动页面，查看网络面板只会加载进入（或接近）视口的图片。如果仍有问题，可以检查：

• 无其他全局图片加载逻辑干扰
• 组件依赖安装正确（npm install react-lazy-load-image-component）

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