search

stratiformltd / react-loadable-visibility

A wrapper around react-loadable and @loadable/component to load elements once they are visible on the page.
BSD 3-Clause "New" or "Revised" License
1.01k stars 31 forks source link

Lazy loading images? #2

Closed oyeanuj closed 7 years ago

oyeanuj commented 7 years ago

Hi @tazsingh, I came across this component, when looking to lazy load images. While I see its utility in general to not load components which are not visible - I am wondering if you'd recommend using this for lazy loading images? Or would this be an overkill/underkill?

Thank you for putting out this library!

tazsingh commented 7 years ago

Hi there @oyeanuj. Realistically, this library should be used in whichever way makes the most sense for your application.

For me and what I believe to be the average use case, this is to load the page by section. So if you have a section that is displayed immediately when the user hits the page, it should not be loaded based on visibility. However sections below that should use this library. Each section can hold text, images, videos, and so on.

Now if, let's say, you have a section of your page that has a very large image in it, then of course you could use this library to load that image. As you mentioned, it works with modules that export React components so you'd have to provide a Component maybe like so: <img src={pathToImage} />.

I would also recommend using Webpack's url-loader to inline the assets for these visibility based chunks such that you're not making multiple HTTP requests to render, as you're already splitting the payload anyway. Using the traditional file-loader is great for the content that is above the fold.

If you're looking for an example of how I do this, I posted code for the website of my consultancy - https://github.com/stratiformltd/website/blob/master/src/pages/architecture/index.js#L20-L33. Feel free to browse that codebase for the accompanying Webpack config and other components/assets.

Hope that helps!

oyeanuj commented 7 years ago

@tazsingh Thank you for the detailed response - super helpful. I'll play around with different techniques!