Loading images outside of viewport

[Cremz]

I've been told that my website that is using this lazy loading plugin is a bit slow when scrolling. It's a picture site similar to 9gag where you constantly scrolls, but right now, once you've loaded visible pictures, you only get a new picture when reaching the threshold.( which for some reason doesn't work for me) I am wondering if it would be possible to load all the images on the page after the ones in the viewport are loaded. It would make UX a lot better, people loading the page would only fetch the images in the viewport, they get displayed, then while they are probably still looking, the other images get loaded. Is this possible with the current plugin or could it be added?

[mzvast]

@Cremz I encounterd the same situation as yours. And I've made a patch version. It works like charm especially when image size is quite large. You can try it with

yarn add git+https://github.com/mzvast/react-lazy-load-image-component.git

and tweak it as you like~

[Cremz]

@mzvast tried it out, but it doesn't seem to be working. The images still only load once you scroll

[mzvast]

@Cremz I configured the component as following.

 <LazyLoadImage
    height={'100%'}
    src={thumbnail}
    width={'100%'}
    placeholderSrc={Placeholder}
    style={{
       borderTopLeftRadius: '0.5rem',
       borderTopRightRadius: '0.5rem'
    }}
                 
 />

As in network panel, if I scroll fast, out-of-viewport images which didn't load will be discarded.