是否可以使用react-lazyload延迟加载背景图像

Question

我创建了一个Section组件，它将图像作为属性，其子项作为内容显示在该部分中，因此该组件看起来如下...

<Section image={'path/to/image'}>
 //content
</Section>

该组件将获取image属性并将其设置为背景图像样式的URL ...

let sectionStyle = {
  backgroundImage: `url(${this.props.image})`
}

然后将在返回元素中处理...

return (
  <section
    style={this.props.image ? sectionStyle : null}>
    <div>
      {this.props.children}
    </div>
  </section>
)

我的问题是，是否有可能延迟加载背景图像，同时也不会影响SEO的内容可用性？换句话说，我想避免LazyLoading整个Section，但不知何故，LazyLoad只是与Section相关联的图像。

Answer 1

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

class LazyImage 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 <img src={this.state.src || this.props.placeholder} />;
  }
}

你可以用<LazyImage src='path/to/hd.jpg' placeholder='path/to/placeholder.jpg' />来称呼它

Answer 2

我为延迟加载图像创建了一个库。它的主要功能是提供动态调整图像大小，但它也可以解决您的问题。我最近在背景图片延迟加载的一些变化PR。

https://github.com/peterlazzarino/react-adaptive-image

这是一个可用于延迟背景图像加载的示例，它将解析来自imgur的图像。在我的生产应用程序中，我的图像解析器指向图像服务器，但这完全可以自定义。您只需要将.header-image类设置为具有高度和宽度。

import React from 'react';
import ReactDOM from 'react-dom';
import { initImages } from 'react-adaptive-image';
import AdaptiveImage from 'react-adaptive-image';

initImages({
    imageResolver: function(image){
        return `https://i.imgur.com/${image.fileName}`
    }
})

class App extends React.Component {
    render() {
      return (
        <AdaptiveImage backgroundImage className="header-image" fileName={'U6zWkcZ.png'} />
      );
    }
  }

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