Reactjs如何在加载DOM之后延迟加载图像

问题描述

我想使reactjs页面延迟加载图像。因此，我在componentDidMount（）内部调用了lazyLoadImages（）。我发现位于浏览器选项卡上的浏览器加载指示符始终一直旋转，直到加载完所有图像为止。。这使我认为我所做的操作不能提供真正的延迟加载图像体验。 / p>

有趣的事情是，如果我用不太短的超时参数（例如100ms（不是0甚至是50ms））将lazyLoadImages（）包装在 setTimeout 中，页面加载指示器将很快停止旋转并消失，这让我感到在后台进程开始加载这些图像时页面DOM已完成。

我认为componentDidMount和window onload是相似的，但事实并非如此。通过使用窗口onload事件，我可以获得与使用setTimeout相同的体验。但是由于我的应用程序是SPA，因此onload事件不适合。因为onload事件仅在我明确刷新此页面时才起作用，而不能使用react-router在页面之间导航。

任何人都对这种现象有想法，而在不使用setTimeout函数的情况下该如何实现？

componentDidMount() {
    setTimeout(this.lazyLoadCarouselImage,100);
    // or invoke directly -> this.lazyLoadCarouselImage();
}
    
lazyLoadCarouselImage() {
   let images = [];
   let loadedCounter = 0;
   let lazyLoadImageList = ['https://wallpaperaccess.com/full/637960.jpg','https://wallpaperaccess.com/full/637960.jpg']

   for (let i=0; i<lazyLoadImageList.length; i++ ) {
      images[i] = new Image();
      images[i].onload = ()=> {
                    loadedCounter++;
                    if (loadedCounter == lazyLoadImageList.length) {
                        // update state here saying all images are loaded
                    }
                }
      images[i].src = lazyLoadImageList[i];
   }
}

解决方法

有些libraries可以使用滚动和调整大小事件处理程序来处理延迟加载，而其他人则使用Intersection Observer API。查看Lazy-loading images了解详情。

如今，您只需将属性int g(int n) { if (n <= 1) return 1; return g(n / 2) + 1; } int f3(int n) { int counter = 0; for (int i = 0; g(i) < n; ++i) ++counter; return counter; } 添加到每个loading="lazy"元素中，就可以延迟加载图像。请记住，该功能是相当新的，因此请确保潜在用户正在使用up to date Browser。

下面是一个快速示例，其中我创建了100张“延迟加载”的图像：

<img>

class App extends React.Component {



  render() {

    let results = [];

    for (let i = 0; i < 100; i++) {

        results.push(
          <img
            key={`image${i}`}
            src={`https://placehold.it/4${i < 10 ? `0${i}` : i }x4${i < 10 ? `0${i}` : i }`}
            alt="placeholder"
            width={`4${i < 10 ? `0${i}` : i }`}
            height={`4${i < 10 ? `0${i}` : i }`}
            loading="lazy"
          />
        )

    }

      return (
        <div style={{ width: '400px' }}>
          {results}
        </div>
      )

    }

  }



  ReactDOM.render(<App />,document.getElementById('root'));

注意：单击“运行代码段”，然后打开浏览器开发人员工具内的“网络”标签，开始滚动，并且当图像靠近视口时应注意如何加载图像。

,

似乎对我有用

const [isLoaded,setIsLoaded] = useState(false);
const [isPageLoaded,setIsPageLoaded] = useState(false); //this helps with lazy loading

useEffect(() => {
    setIsLoaded(true);
},[]);

useEffect(() => {
    if (isLoaded) {
        setIsPageLoaded(true);
    }
},[isLoaded]);