使用样式组件实现图像的延迟加载

Question

我们正在使用样式组件在屏幕上渲染图像。我想要实现的是图像应该以惰性方式加载，我们首先加载分辨率较低的图像，然后加载高分辨率的图像。这就是我想要做的。const Imagephone = styled.div`  // width: 25.5rem;  // width: 21rem;  width: 23.75rem;  height: 48.230rem;  margin: 0 auto;  background: ${props => props.primary ? "palevioletred" : "white"};  background-image: url(${props => !props.loaded || props.error ?  `https://some url`:    `https://some url2`  }) ;  background-repeat: no-repeat;  background-size: cover;  position: relative;  top: ;`在我的课上我有这个    super(props);    this.state = {      loaded: false,      error: false    };  }  componentDidMount() {    const img = new Image();    debugger    img.onload = () => {      debugger      this.setState({        loaded: true      });      debugger    };    img.onerror = () => {      this.setState({        error: true      });    };  }```and in my render i am doing this .     <Imagephone loaded={this.state.loaded} error={this.state.error} />` 我担心的是，在组件安装和图像加载后，我们需要将加载状态设置为真，但这部分不会被执行。我没有看到 img.onload 被执行。我们如何在延迟加载图像的情况下实现它。

Answer 1

问题是您正在创建一个新Image实例并依赖于它的onload和onerror方法。但是，您需要使用渲染img的元素onLoad和onError道具。

const LazyImage = ({ loadingSrc, actualSrc, errorSrc, ...props }) => {

  const [isImageLoaded, setImageLoaded] = React.useState(false);

  const [hasError, setHasError] = React.useState(false);

  

  const src = React.useMemo(() => {

    if (hasError) {

      return errorSrc;

    }

    

    if (isImageLoaded) {

      return actualSrc;

    }

    

    return loadingSrc;

  }, [hasError, isImageLoaded])

  

  return (

    <img

      src={src}

      onLoad={() => setImageLoaded(true)}

      onError={() => setHasError(true)}

      {...props}

    />

  )

}

const App = () => (

  <LazyImage

    loadingSrc="https://media3.giphy.com/media/17mNCcKU1mJlrbXodo/giphy.gif"

    actualSrc="https://hackernoon.com/hn-images/1*y6C4nSvy2Woe0m7bWEn4BA.png"

    errorSrc="https://kuwaitlifestyleblog.files.wordpress.com/2016/07/windows_bug6-100581894-primary-idge.jpg?w=608&h=405"

    width={300}

    style={{ margin: '0 auto', display: 'block' }}

  />

)

ReactDOM.render(<App />, document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="root"></div>

编辑：

使用styled-components：

const StyledImage = styled.div`

  background-image: url("${props => props.error ? props.errorSrc : (props.loading ? props.loadingSrc : props.actualSrc)}");

  background-position: center center;

  background-size: contain;

  width: 300px;

  height: 200px;

  display: block;

  margin: 0 auto;

`;

const LazyImage = ({ loadingSrc, actualSrc, errorSrc, ...props }) => {

  const [isImageLoaded, setImageLoaded] = React.useState(false);

  const [hasError, setHasError] = React.useState(false);

  

  React.useEffect(() => {

    const img = new Image();

    

    img.onload = () => setImageLoaded(true);

    img.onerror = () => setHasError(true);

    img.src = actualSrc;

  }, [actualSrc])

  

  return (

    <StyledImage

      loadingSrc={loadingSrc}

      actualSrc={actualSrc}

      errorSrc={actualSrc}

      loading={!isImageLoaded}

      error={hasError}

      {...props}

    />

  )

}

const App = () => (

  <LazyImage

    loadingSrc="https://media3.giphy.com/media/17mNCcKU1mJlrbXodo/giphy.gif"

    actualSrc="https://hackernoon.com/hn-images/1*y6C4nSvy2Woe0m7bWEn4BA.png"

    errorSrc="https://kuwaitlifestyleblog.files.wordpress.com/2016/07/windows_bug6-100581894-primary-idge.jpg?w=608&h=405"

  />

)

ReactDOM.render(<App />, document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>

<div id="root"></div>

Answer 2

你的图像需要一个 src 来加载一些东西：

  componentDidMount() {

    const img = new Image();

    debugger

    img.onload = () => {

      debugger

      this.setState({

        loaded: true

      });

      debugger

    };

    img.onerror = () => {

      this.setState({

        error: true

      });

    };

    // This line will fire a request for the image file

    img.src = this.props.imgSrc

  }

进而

  background-image: url(${props => !props.loaded || props.error

   ? `https://fallback.url`

   : props.imgSrc

  });