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

标签 javascript css reactjs promise

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

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

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

我正在使用 React。

最佳答案

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

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

关于javascript - 如何处理图像背景的加载状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61504106/

相关文章:

javascript - 如何在 Safari 中启用 navigator.hardwareConcurrency?

javascript - 在 TypeScript 中使用点表示法和函数组件

css - 在父 div 中定位子元素的最佳方式是什么?

javascript - React Native 中未定义函数

javascript - 访问和更改 &lt;script&gt; 标签的属性

Javascript:包含随机数的网址

javascript - 将 NSURLProtocol 与 ReactNative 结合使用

reactjs - 在 React 中使用 state 和 include 会给出 Argument of type 'number' is not assignable to parameter of type 'never' 错误

html - 如何设置鼠标离开元素(悬停关闭)时的过渡?

html - 图像右下角的图片