Just wondering if anyone out there is using the data attribute 'lazy' on their websites? I understand that most of the browsers now support lazy loading but wonder if it is worth trying to implement it.

Hi John,
I' have used it on this website: https://www.wbkessen.de/
(on the pages index.html and kuenstler.html).
According CanIUse it has a global usage of 74%.
Of the major modern browser only Safari has not yet implemented some kind of support.
But, that's okay, since the things a browser do not understand are ignored. The page still renders.
And , that's a reason to try it out.
Btw. this website is not optimized for older browsers or IE.

Hi Rene,
Thanks for your comments. I see you use img loading="lazy" . Did you do that in Site Designer or could you use a custom data attribute such as I have in the image below?

You can define any custom attribute with that piece of logic you show us in your attachment. But, in this case you should change the name from “data-custom-1” into “loading” (see my screenshot).
I don’t know if this will work in SD, thought. I don’t think this will activate lazy loading, since any attribute you define, in this way will not end up on the img-tag (second screenshot).
And I understand from https://developer.mozilla.org/en-US/doc … zy_loading that that must be the case – the attribute has to go on the img-tag.
So, when you want to use this attribute, you have to enhance your exported html-files.

All done in SD.
https://ericrohloff.com/coffeecup/ccfor … /lazy-img/

Hi Eric,
Your solution is based on JavaScript.
But, wasn’t Johns question about the browser native implementation of lazy loading, using the attribute “loading” on images?

You are correct René, I was looking for the most simple way to implement lazy loading via the browser. Almost all browsers now support this function as noted above.

After a quick test with google pagespeed it appears that the images are lazy loading via the data attribute I tried above. I will continue to test however with the img tag.

I was providing a solution that doesn't require altering after export. Most simple? There will be other users that find this thread that don't want to dig into the guts of their site when all you need to do is add a little js in SD.

A touch of js a sprinkling of custom CSS a bit of Hubble bubble toil and trouble boom there you have it all within SD.

I've been following this discussion and was also trying out the various things you mention with SD. I have not succeeded, despite 'digging into the guts' of the sites. I agree with Eric, better to add a bit of js. I haven't had time to try his solution yet, though, since I have been busy trying to replicate things with the html Editor, where I think I've had better luck, especially with my third attempt. The two first ones I don't even know if they are actually loading lazily, maybe someone wants to take a look, https://inger.coffeecup.com. Never mind the general styling, I was concerned with this lazy bit.