Implement Lazy Loading...

Kevin

Well-known member
You can easily reach 100 images on one page if your users like to put full sizes images into their posts.
Especially for photography based sites, lazy loading as much as possible becomes a must.
 

tomdav

Active member
I run a hiking forum with close to a million images posted. Every image is thumbnailed, few exceptions. We don't have issues getting people to post images. I think it's more important to (1) make it easy to post images (2) display larger thumbnails, and (3) have a good lightbox. XF's thumbnails are too small by default and the lightbox is awful IMHO. It cuts off the bottom of the image by default. Also, there are semi-transparent bars covering up the top and bottom of the image. They go away after a few seconds but I personally find them distracting and annoying. Photo purists don't want that stuff covering up their photos. Also, the back button doesn't close the lightbox. Many other gripes but I won't wax poetic It's just not my cup of tea. The lightbox was the main reason I didn't switch to XF a couple years ago. In the process of converting to XF but will be ditching the XF lightbox and thumbnails. Here is a sample post on my site with 100+ images. That page would be bloated as heck with full size images and lazy loading.
 
Last edited:

Kevin

Well-known member
@tomdav if you're planning on converting to XF with the same functionality, I'm sure you've already discovered this but, if not.... heads-up that XF by default creates squared & cropped attachment thumbnails, if you want to keep aspect ration thumbnails like that page you'll need to override the thumbnail creation function to keep the aspect and to also change the quality of them.
 

tomdav

Active member
Right, I'm planning to just re-use the same code which automatically thumbnails internal and external images and justifies them.

But back to lazy loading, if you have a page of 100+ images, lazy loading won't solve the root problem for mobile users unless you also have an image proxy serve up appropriately sized images for them.
 

dutchbb

Well-known member
This should be native in chrome 75 and enabled by defauld in 76. Also works for embeds (iframe).



Code:
<img src="example.jpg" loading="lazy" alt="example" />
<iframe src="example.html" loading="lazy">
This could be added for full attachments, but google will also lazy load some images without and if you want to exclude this can be done with loading="eager"
  • lazy: is a good candidate for lazy loading.
  • eager: is not a good candidate for lazy loading. Load right away.
  • auto: browser will determine whether or not to lazily load.
 

JoshyPHP

Well-known member
I've been following the status of lazy loading in Chromium for a little while and so far I don't think it's ready for prime time. The first issue is I don't think that images are lazy loaded at all. Looking at the network tab, they are all loaded eagerly. That's on Chrome 76 with both the "lazy" flags enabled.

The second issue, the one that I personally find annoying, is that there's no setting to determine how close to the fold an iframe must be to be loaded. Lazy iframes end up loading while they are on display rather than just before they become visible, which means the user ends up watching them load. That makes it feel slow.
 

Kirby

Well-known member
Chrome native lazy loading is quite different from lazy loading through JavaScript libraries like LazySizes:
Chrome does fire 2048 byte range GET requests for all images that do not have explicit dimensions set, you can see those requests if you inspect network tab closely.

It does this so the layout can be calculated before the images are fully loaded.

Furthermore, it does havbe a dynamic threshold of 3000-8000 pixels, which is quite a lot.
 

JoshyPHP

Well-known member
I tried this demo with Chrome 76.0.3806.1 with the lazy image internal flag on for good measure. The dimensions for all images are hardcoded in the img tag so the native dimensions aren't required for layout. All of the images are requested at once with a range header. However, the provider returns the full asset, which means that every image is downloaded in full whether they are visible or not.
 

Kirby

Well-known member
Yeah, it seems like Chrome is always doing the range request - which doesn't make too much sense if dimensions are known.

 
Last edited:

JoshyPHP

Well-known member
Yeah, I think in the long term lazy-loading will be really good but that's going to take a little while to work seamlessly and efficiently. It's not a silver bullet and it's going to take years before it works just right.

That's why for the time being I think it's fine to do lazy loading in userland and limit it to images that don't interfere with the layout. For example, Avatars in XenForo use 100% of their container so they're easy to load just-in-time without affecting the layout. It's a baby step but it's the best bang-for-your-buck. Something that can be implemented with little code and be made available to all browsers at the same time.
 
Top