This is a theme component that will stop images far outside of the viewport from loading. Once they are near the viewport, it will load and fade them in position.
Github repository link:
Discourse by default will not load every post in a topic. Only 20 or so are loaded initially:
and more are loaded as you scroll:
This component takes the images in those loaded posts and forces them to lazyload.
This results in data-saving and reduced server load. For example, I have a topic with 15 replies and lots of images. If I check the amount of data transferred (with caching disabled) when the topic is loaded, I get this:
This is loaded initially and without me doing any scrolling on the page.
Now if I turn on lazyloading, purge the cache and try again for the same topic:
The amount of posts loaded is the same, the only difference is the images in them are not loaded until they are near the view port.
Before images are loaded, you get a placeholder that indicates that there’s an image loading. Once the images load, they’re faded in like so:
The placeholder color follows your current color scheme.
I have Tiles / Slick installed. Will this work?
Yes. You just need to make sure that both Slick and Tiles are updated and everything should be ok.
How do I install this component?
You install this component just like any other theme. Follow the instructions in the official guide:
Once you’re done, simply add the component to your current theme.