如何检测是否使用反应钩子加载了反应组件中的所有图像答案

【问题标题】：How to detect whether all images in a react component is loaded using react hooks如何检测是否使用反应钩子加载了反应组件中的所有图像
【发布时间】：2021-01-22 19:52:15
【问题描述】：

我正在开发下一个 js 应用程序。我知道 ES6，但对反应很陌生。我有一个组件，它从另一个组件的 useEffect 获取数据函数中调用。下面是我的组件代码：

export default function HeaderResults(cars) {    
    return(
      <div className="results">          
          {cars.results &&
            cars.results.map((result) => {
              return (
                <Link
                  href={`/cars/${createLink(result.title)}/${result.id}`}
                  onClick={() => clearSearch()}
                >
                  <div className="result-item">
                    <img
                      src={`https://api.cars.com/images/${result.poster_car}`} alt="..."
                    />
                    <div className="title" key={result.name}>
                      {result.name}
                    </div>
                  </div>
                </Link>
              );
            })}
        </div>
    );
}

这里的cars 是我从获取数据函数中得到的响应对象。我通过在我的渲染函数中使用 {HeaderResults(cars)} 来使用它。

这给了我大约 20 个或更多的结果。问题是每个图像都是单独加载的，每次加载看起来很糟糕的图像时，我的结果窗口都会重新排列。

我想要的是仅在加载所有图像或显示加载器时才显示结果。我尝试为此创建一个图像组件并使用 ref.但没有运气。

我正在使用 next js，并希望使用 react hooks 来实现。有没有办法在不使用任何第三方库的情况下实现这一目标？欢迎提供解决方案。谢谢

【问题讨论】：

尝试循环检查以计算加载的图像techiedelight.com/check-whether-image-is-loaded-with-javascript
谢谢。我试过了，但没有太大帮助。
请在下面查看我的答案，我使用了上面提到的链接中的方法

标签： javascript reactjs react-hooks next.js

【解决方案1】：

这是我的想法

渲染所有图像，但将 CSS 样式设置为 visibility: hidden

通过以这种方式隐藏它们，浏览器仍会加载图像！
为每个图像添加一个 onLoad 并更新加载的图像列表
循环检查是否所有图片都加载完毕，如果加载完毕，设置visibility: visible

查看我的示例https://codesandbox.io/s/count-of-loaded-images-pd3qn?file=/pages/index.js

【讨论】：