Почему мой компонент react-lazyload не работает?

Еще несколько дней назад моя реализация 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/

(Проверьте вкладку Network в Inspector, чтобы увидеть, что все изображения запрашиваются при начальной загрузке)

Там также видео здесь

Есть идеи о том, что я делаю неправильно?

Заранее спасибо, Мортен

Источник

1 ответ

Я столкнулся с аналогичными проблемами с пакетом npm react-lazyload. Во-первых, этот пакет допускает только одного дочернего элемента для каждого компонента LazyLoad, поэтому вам придется изменить иерархию, чтобы заставить ее работать. Во-вторых, я обнаружил странное поведение при загрузке изображений, которые уже были установлены в области просмотра. В документации есть списокimport {forceCheck} from 'react-lazyload'; в сочетании с forceCheck(); как средство ручной проверки элементов, но я счел это неудобным и недостаточным для компонентов, которые не перерисовываются.

Я смог получить те же самые функции с более простой реализацией из альтернативного пакета react-lazy-load. Обратите внимание на дефис. Для этого пакета также требуется узел>0,14. Более или менее, он делает то же самое. Вы можете прочитать их документацию здесь: react-lazy-load

Источник
Другие вопросы по тегам