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

Question

我想做一个reactjs页面懒惰加载图像。因此，我调用lazyLoadImages（）内部的组件didMount（）。我发现位于浏览器选项卡的浏览器加载指示器仍然一路旋转，直到加载所有图像。这让我认为我所做的并没有提供真正的懒惰加载图像体验。

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

我认为组件didmount和windowonload是相似的，但它们不是。我可以通过使用windowonload事件获得与使用setTimeout相同的体验。但由于我的应用程序是SPA，因此onload事件不适合。因为onload事件只有在我显式刷新此页面时才起作用，但不能使用react路由器在页面之间导航。

任何人都有这种现象的想法，我如何在不使用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];
   }
}

Answer 1

看来对我有用

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

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

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

Answer 2

有些库可以使用scroll和resize事件处理程序处理延迟加载，而其他库则使用Intersection Observer API。查看延迟加载图像以了解详细信息。

现在，只需将属性load=“lazy”添加到每个

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

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'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>