javascript - 如何处理图像背景的加载状态？

Question

我显示一组图像。我想在加载期间显示灰色背景， promise 成功后显示实际图像，或者如果过程失败则显示错误图像。通过图像对象中提供的 url，可以从服务器检索图像。

所有图像都可以异步加载。如何根据完成状态返回不同的背景？

我的代码很简单: imageList.map((image, i) => <Image picture={image.url} />

我正在使用 React。

Answer 1

因此，我找到了 @ParthPatel 建议的以下延迟加载库的解决方法:

    <Image
      width={width}
      style={{background: "#eee"}}
      height={height}
      data-src={image}
      onError={(e) => {
        (e.target as HTMLImageElement).src =
          "errorimg.jpg";
      }}
      className="lazyload"
    />