如何在内联样式属性 (React) 中延迟加载背景图像？

Question

我目前正在开发我的第一个 React 应用程序，但我正面临一些困难（对我而言）。

<div
    className="container-fluid"
    id="cityDetail"
    style={{
        backgroundImage: `url(${camera.lastPhoto})`,
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",
        backgroundSize: "cover",
        height: "100vh"
    }}
>

我想延迟加载 backgroundImage。

我还没有找到好的组件/实用程序来做到这一点。有没有人有任何想法？

Answer 1

这是延迟加载图像的简单组件：

class LazyBackground extends React.Component {
  state = { src: null };

  componentDidMount() {
    const { src } = this.props;

    const imageLoader = new Image();
    imageLoader.src = src;

    imageLoader.onload = () => {
      this.setState({ src });
    };
  }

  render() {
    return <div {...this.props} style={{ backgroundImage: `url(${this.state.src || this.props.placeholder})` }} />;
  }
}

你会用 <LazyBackground src='path/to/hd.jpg' placeholder='path/to/placeholder.jpg' />

Answer 2

这是一个基于 Naoise 回答的自定义 React 钩子：

const useProgressiveImage = src => {  
  const [sourceLoaded, setSourceLoaded] = useState(null)

  useEffect(() => {
    const img = new Image()
    img.src = src
    img.onload = () => setSourceLoaded(src)
  }, [src])

  return sourceLoaded 
}

用法：

const Component = (source, placeholder) => {
  const loaded = useProgressiveImage(source)

  return (
    <div style={{ backgroundImage: `url(${loaded || placeholder})` }} />
  )
}