Lazy loading not working?

We should break this out of this Topic.

@p16 where are you seeing this? I’m seeing loading="lazy" rendered in the img tags on my website.

image

Can you confirm your html is missing that attribute?

I’m wondering if this is because they are loaded within the viewport before the formatting pushes them out, in which case this may never work.

You will note everything is collapsed if javascript is somehow broken, or the rendering JS has not run yet, so I think this is likely.

I do get the loading=lazy attribute, but it is probably not working due to being loaded before being pushed down. I’m thinking if we use srcset (which David also does in his TC, based off the library Discourse uses) we could load a lower res image initially and change to a higher res one in the viewport?

PS: I also checked on Rideables and lazy loading doesn’t work.

@merefield I was trying to debug this and am running into an issue I was hoping you could help with:

  1. I changed the src attribute for topic list images to data-src and their src to a null gif, and planned to change the src attribute later on page load for lazy loading.
  2. This would have worked in theory, but I found that image thumbnails were loading (in the network tab) despite this.
  3. Removing the TC from the default theme doesn’t stop this behavior as well - the image thumbnails still load.
  4. Only going to safe mode disables this behavior.

EDIT: So the thumbnails were being loaded by the Social plugin - pretty sure its from the Launchpad.

UPDATE: The good news is that I can get lazy loading to work. Will update you once I have refined it a bit. Spoke too soon - images are still getting loaded despite src being null :frowning:

1 Like

Will definitely look at this when I have more time, unfortunately I’m going to have to restrict myself to critical fixes for the time being due to other commitments, probably for another 2 months or so.

1 Like

Thinking about this, isn’t a straightforward solution just to lower the thumbnail resolution?:

ie make that number higher

until you get the best trade off?

What are your constraints? Low connection speeds? Low spec devices?

1 Like

I tried lowering it to 3, but the size saving is not much and the quality difference is quite apparent (images are on average 600x400 in a single column view).

The main constraint is the size and number of images being loaded I would save quite a bit on page bloat/performance if I didn’t have those images load before they are even rendered.

Do you know how David’s TC does this, since its pulling the thumbnails from core?

I’ll have to investigate this at some point, but we are using the exact same thumbnails, though he may offer a slightly different set of resolutions (as the range is set in the json file)

1 Like

Thanks, appreciate your help with all this.

The main reason I couldn’t get lazy loading to work is because the thumbnails come through regardless despite the src url being completely null. Just a guess, but the TC is probably pulling it first elsewhere.

In other news, V has been performing quite well :slight_smile:

1 Like

I think I might have a very simple solution.

If I make the default row-span high, instead of expanding to size, the tiles will collapse to size, so more stuff will start off-screen than on.

Let’s try that!

1 Like

OK done, try that

@p16

1 Like

Hey @merefield I tried that and even set the image src as null (see repo here) but the images are still loading in the network tab despite the url not being set and the images not being rendered:

Is there anywhere in both yours and David’s TCs I can investigate that might be a likely culprit?

Now you’ve lost me, how is that screenshot related to TLP TC?

So this is the normal view using TLP:

The above view is from removing src url, but in both cases the images still load in the network tab.

Make sense?

That’s not TLP?

It is - I have just gone to town with the CSS and added a one column layout.

1 Like

I can repro that.

The change did not solve the issue. The browser is still insisting on loading the images.

imho, the browser really should be dealing with this, and cannot explain why the browser is not using more discretion, when clearly the images are off screen?

Adding the complexity of a javascript algo to deal with it would be a step backward imho, as it would be something additional to maintain.

Unfortunately I have no bandwidth to pursue this further at this time.

1 Like

No worries, I’ll keep adding notes here for when you have time. Feel free to ignore - just putting it all here.

I don’t think its the browser that’s at fault - I think the issue is with Discourse. It is loading all these images in a div called data-preloaded, before they are even needed.

From this post, this preloaded data payload contains the “after-boot” information for the Discourse JS app. When you hard-reload a topic page, the block contains the information needed to render the topic, without contacting the server again.

Not sure why the images are being injected here, and not for David’s TC.

1 Like

Ah interesting. So maybe there’s a way to switch that behaviour off …

1 Like