LazyLoad images

theme-component

(Joe) #1

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:
https://github.com/hnb-ku/Discourse-image-lazyload


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:

lazy2

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:

lazy1

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.


Credit:

This component uses Alexander Farkas’s excellent Lazysizes library. (3kb gzip - MIT license)


Tiles Image Gallery
Tiles Image Gallery
(Jeff Atwood) #2

Why is this necessary? Discourse already loads topics in chunks of 20 posts (10 on Android because of historic platform performance issues).


(Sam Saffron) #3

I think it is reasonable for extremely heavy image sites, like photography forums maybe, medium do this on single blog posts


(Joe) #4

Yes, but all images in those 20 posts are loaded by the browser as well. Even if the user doesn’t quite make it down to post #13 for example.

Lazyloading images outside the viewport has two effects here:

  1. Reduce bandwidth by not loading the images until they are near the viewport. This prevents wasted bandwidth where the images outside the viewport are loaded but the user navigates away from the topic before scrolling down.
  2. Gives more priority to images in or near the viewport and so they will load faster since images outside the viewport won’t be fighting for bandwidth.

(Jeff Atwood) #5

I still feel like this should be a browser function, and it’s crazy that the browser / HTML tags have no provision for this built in.


(Sam Saffron) #6

I agree completely, browser really really let us down here. They know what is in the viewport. I wonder if there is any ticket open for Chrome or Firefox discussing this.