Обратный вызов для наблюдателя пересечения, вызываемого для изображений, которые не пересекаются

Question

У меня есть несколько изображений с фиксированной высотой, которые я хочу lazyload.Эти изображения обернуты в компонент <LazyLoad />, который обеспечивает наблюдателя пересечения.На главной странице я использую несколько таких <LazyLoad /> компонентов.Однако, хотя у меня есть 6 из этих компонентов, и только один из них (самый первый), кажется, пересекает порт просмотра, на самом деле это первые 4 изображения, которые уже загружены, поэтому только последние два загружаются лениво.Как заставить наблюдателя работать так, как я ожидаю?

В этой песочнице код .

Answer 1

Ваш вопрос приходит img с пустой строкой.Страница отображает изображения, но игнорирует height, который вы на нем установили.Это означает, что все изображения находятся внутри области просмотра, которые вызывают наблюдателя.Вместо пустой строки вы можете рассмотреть значение null.Это избежать этой проблемы.Здесь ваш пример обновлен.

getImgUrl = () => {
  return this.state.intersected
    ? "https://images.unsplash.com"
    : null;
};