是否可以使用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

我创建了一个用于延迟加载图像的库。它的主要功能是提供图像的动态调整大小，但它也可以解决您的问题。我最近对背景图像延迟加载进行了一些更改。

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'));