CODEWITHSUNDEEP
reactjslazy-loadingreact-lazy-load
mortenbjoern
mortenbjoern

Reputation: 31

Why is my react-lazyload component not working?

Up until a few days ago, my implementation of LazyLoad was working perfectly, but now I can't seem to get it to work.

This is my component:

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

And in App.js it is called like this:

render() {

        return (
            <div className="wrapper">

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

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

But it won't work! Here's the demo environment: https://gifted-kare-1c0eba.netlify.com/

(Check Network tab in Inspector to see that images are all requested from initial load)

There's also a video here

Any idea about what I am doing wrong?

Thanks in advance, Morten

Upvotes: 3

Views: 8419

Answers (1)

ZontarZon
ZontarZon

Reputation: 743

I ran into similar issues with the npm package react-lazyload. For one, this package only allows one child per LazyLoad component, so you would have to rearrange your hierarchy to make it work. Secondly, I found some strange behaviors when loading images that were already set within the viewport. The documentation does list import {forceCheck} from 'react-lazyload'; combined with forceCheck(); as a means of manually checking the elements, but I found this inconvenient and insufficient for components that aren't rerendering.

I was able to obtain the exact same functionalities with an easier implementation from the alternative package react-lazy-load. Mind the hyphen. This package also requires node>0.14. More or less, it does the same thing. You can read their documentation here: react-lazy-load

Upvotes: 5

Related Questions