Question

直到几天前，我的LazyLoad实施都可以正常工作，但现在看来似乎无法正常工作。

这是我的组件：

import React from 'react';
import LazyLoad from 'react-lazyload';
import './image.scss';

const Image = image => (

  <LazyLoad height={200} offset={100} once>

    <div
    className="image-container"
    orientation={image.orientation}>    

      <img
      className="image"
      src={image.url}
      alt={image.alt}
      />

      {'caption' in image &&
        <div className="meta">
          <p className="caption">{image.caption}</p>
          <p className="order">{image.currentNumber}/{image.maxNumber}</p>
        </div>
      }

    </div>

  </LazyLoad>  
)

export default Image

在App.js中，它的调用方式如下：

render() {

        return (
            <div className="wrapper">

                <GalleryTop details={this.state.gallery_top} />

                {this.state.images.map((image, index) => <Image key={index} {...image} /> )}
          </div>
        )
    }

但是它行不通！这是演示环境： https://gifted-kare-1c0eba.netlify.com/

（在Inspector中检查“网络”选项卡以查看所有图像都是从初始加载请求的）

还有一个视频here

是否知道我在做什么错？

预先感谢，莫滕

Answer 1

我在使用npm软件包react-lazyload时遇到了类似的问题。首先，此程序包每个LazyLoad组件只允许一个孩子，因此您必须重新排列层次结构才能使其正常工作。其次，在加载已经在视口中设置的图像时，我发现了一些奇怪的行为。该文档的确列出了import {forceCheck} from 'react-lazyload';和forceCheck();的组合，以作为手动检查元素的一种方式，但是我发现这很不方便，并且对于不重新渲染的组件来说是不够的。

我可以从替代软件包react-lazy-load中以更容易的实现获得完全相同的功能。注意连字符。该软件包还需要node> 0.14。或多或少，它做同样的事情。您可以在这里阅读其文档：react-lazy-load

为什么我的react-lazyload组件不起作用？

1 个答案: