Add lazyload / loading support

Question

Add lazyload / loading support

braposo opened this issue 7 years ago · comments

So that we can load image only when needed and show a loading state if they're still loading. It will help decreasing the loading time of the page.

Here's what we had previously in the other repo:

Display a lo-res image as placeholder, like Medium currently does: https://jmperezperez.com/medium-image-progressive-loading-placeholder/

Interesting webpack loaders (but probably not applicable here): https://github.com/boopathi/image-size-loader and https://github.com/Levelmoney/resize-image-loader

Great presentation with examples on the topic: https://jmperezperez.com/renderconf17/#/

And also more examples: https://jmperezperez.com/more-progressive-image-loading/

Antonio ElPepe Segoviano commented 7 years ago

+1

Bernardo Raposo · Answer 1 · Fri Mar 31 2017 06:51:00 GMT+0800 (China Standard Time)

We can also use https://github.com/stutrek/scrollmonitor-react to trigger the load events on viewport enter

Bernardo Raposo · Answer 2 · Thu Apr 27 2017 07:56:24 GMT+0800 (China Standard Time)

Also relevant https://github.com/aFarkas/lazysizes and https://www.sitepoint.com/how-to-build-your-own-progressive-image-loader/

Anuj · Answer 3 · Wed Jul 19 2017 00:31:13 GMT+0800 (China Standard Time)

@braposo Thanks for putting out this library! Also, super interested in lazy-load support - wondering if you've made any progress on this or have notes to share?

Bernardo Raposo · Answer 4 · Wed Jul 19 2017 01:27:00 GMT+0800 (China Standard Time)

@oyeanuj unfortunately I didn't quite have the time to focus on this, but what I can say is that it's likely that we'll try to keep this package independent from any scroll/lazyload library. That means that there will probably be an isVisible prop that anyone can use to control which version of the image is rendered.

I'll add examples with react-scrollmonitor and react-loadable for inspiration so people can easily integrate this with one of those libraries.

Sounds good?

Anuj · Answer 5 · Wed Jul 19 2017 01:29:09 GMT+0800 (China Standard Time)

@braposo Thank you for the quick response! The example idea sounds good, looking forward to it. One thing, if I may suggest, is having a placeholder prop which allows the user to customize what gets shown there - solid color (a div with that component) or some other image, for example.

Bernardo Raposo · Answer 6 · Tue Aug 15 2017 19:18:02 GMT+0800 (China Standard Time)

Another article for inspiration about using IntersectionObserver API https://deanhume.com/Home/BlogPost/lazy-loading-images-using-intersection-observer/10163

Bernardo Raposo · Answer 7 · Thu Oct 26 2017 06:16:41 GMT+0800 (China Standard Time)

Some lqip alternative with svgs https://github.com/technopagan/sqip

Bernardo Raposo · Answer 8 · Mon Oct 30 2017 04:35:31 GMT+0800 (China Standard Time)

This is also interesting but probably not the best approach https://github.com/wcandillon/react-progressive-image-loading

Bernardo Raposo · Answer 9 · Sun Nov 05 2017 20:19:28 GMT+0800 (China Standard Time)

More image loading techniques https://medium.com/@jmperezperez/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c

Bernardo Raposo · Answer 10 · Wed Nov 14 2018 07:42:31 GMT+0800 (China Standard Time)

After putting some thought on this for v3 I decided to keep this library as slim as possible and avoid doing too much. The lazy-loading can be easily achievable with one of the many libraries available in combination with the src or srcSet props.

I might add an example to codesandbox but it isn't a priority right now so I'll close this issue. If someone else wants to do it I'll happily add it to the docs!