[OzzModz] Lazy Load Images

[OzzModz] Lazy Load Images 1.0.3

No permission to download
Overview FAQ Updates (3) History Discussion
Mr. Jinx said:
Can you give an example by sharing part of the page source, which includes the complete IMG tag (and a few more lines).
Click to expand...
HTML: 
<div class="bbWrapper"><a href="https://domain.com/data/attachment-files/2020/06/1867898_dogukan-sahin-Wddj9jJFb6k-unsplash.jpg"
        target="_blank" class="js-lbImage"><img src="https://domain.com/data/attachment-files/2020/06/thumb/1867898_dogukan-sahin-Wddj9jJFb6k-unsplash.jpg"
        class="bbImage "
        style=""
        alt="dogukan-sahin-Wddj9jJFb6k-unsplash.jpg"
        title="dogukan-sahin-Wddj9jJFb6k-unsplash.jpg" /></a><a href="https://domain.com/data/attachment-files/2020/06/1867899_hal-gatewood-alntq-WvZZM-unsplash.jpg"
        target="_blank" class="js-lbImage"><img src="https://domain.com/data/attachment-files/2020/06/thumb/1867899_hal-gatewood-alntq-WvZZM-unsplash.jpg"
        class="bbImage "
        style=""
        alt="hal-gatewood-alntq-WvZZM-unsplash.jpg"
        title="hal-gatewood-alntq-WvZZM-unsplash.jpg" /></a><a href="https://domain.com/data/attachment-files/2020/06/1867900_antoine-dautry-_zsL306fDck-unsplash.jpg"
        target="_blank" class="js-lbImage"><img src="https://domain.com/data/attachment-files/2020/06/thumb/1867900_antoine-dautry-_zsL306fDck-unsplash.jpg"
        class="bbImage "
        style=""
        alt="antoine-dautry-_zsL306fDck-unsplash.jpg"
        title="antoine-dautry-_zsL306fDck-unsplash.jpg" /></a><a href="https://domain.com/data/attachment-files/2020/06/1867902_isaac-smith-AT77Q0Njnt0-unsplash.jpg"
        target="_blank" class="js-lbImage"><img src="https://domain.com/data/attachment-files/2020/06/thumb/1867902_isaac-smith-AT77Q0Njnt0-unsplash.jpg"
        class="bbImage "
        style=""
        alt="isaac-smith-AT77Q0Njnt0-unsplash.jpg"
        title="isaac-smith-AT77Q0Njnt0-unsplash.jpg" /></a><a href="https://domain.com/data/attachment-files/2020/06/1867903_chris-liverani-ViEBSoZH6M4-unsplash.jpg"
        target="_blank" class="js-lbImage"><img src="https://domain.com/data/attachment-files/2020/06/thumb/1867903_chris-liverani-ViEBSoZH6M4-unsplash.jpg"
        class="bbImage "
        style=""
        alt="chris-liverani-ViEBSoZH6M4-unsplash.jpg"
        title="chris-liverani-ViEBSoZH6M4-unsplash.jpg" /></a><a href="https://domain.com/data/attachment-files/2020/06/1867904_joyce-mccown-gpiKdZmDQig-unsplash.jpg"
        target="_blank" class="js-lbImage"><img src="https://domain.com/data/attachment-files/2020/06/thumb/1867904_joyce-mccown-gpiKdZmDQig-unsplash.jpg"
        class="bbImage "
        style=""
        alt="joyce-mccown-gpiKdZmDQig-unsplash.jpg"
        title="joyce-mccown-gpiKdZmDQig-unsplash.jpg" /></a><a href="https://domain.com/data/attachment-files/2020/06/1867905_hannah-olinger-8eSrC43qdro-unsplash.jpg"
        target="_blank" class="js-lbImage"><img src="https://domain.com/data/attachment-files/2020/06/thumb/1867905_hannah-olinger-8eSrC43qdro-unsplash.jpg"
        class="bbImage "
        style=""
        alt="hannah-olinger-8eSrC43qdro-unsplash.jpg"
        title="hannah-olinger-8eSrC43qdro-unsplash.jpg" /></a><a href="https://domain.com/data/attachment-files/2020/06/1867906_siora-photography-hgFY1mZY-Y0-unsplash.jpg"
        target="_blank" class="js-lbImage"><img src="https://domain.com/data/attachment-files/2020/06/thumb/1867906_siora-photography-hgFY1mZY-Y0-unsplash.jpg"
        class="bbImage "
        style=""
        alt="siora-photography-hgFY1mZY-Y0-unsplash.jpg"
        title="siora-photography-hgFY1mZY-Y0-unsplash.jpg" /></a><a href="https://domain.com/data/attachment-files/2020/06/1867907_yustinus-tjiuwanda-BCBGahg0MH0-unsplash.jpg"
        target="_blank" class="js-lbImage"><img src="https://domain.com/data/attachment-files/2020/06/thumb/1867907_yustinus-tjiuwanda-BCBGahg0MH0-unsplash.jpg"
        class="bbImage "
        style=""
        alt="yustinus-tjiuwanda-BCBGahg0MH0-unsplash.jpg"
        title="yustinus-tjiuwanda-BCBGahg0MH0-unsplash.jpg" /></a><a href="https://domain.com/data/attachment-files/2020/06/1867908_kelly-sikkema-4JxV3Gs42Ks-unsplash.jpg"
        target="_blank" class="js-lbImage"><img src="https://domain.com/data/attachment-files/2020/06/thumb/1867908_kelly-sikkema-4JxV3Gs42Ks-unsplash.jpg"
        class="bbImage "
        style=""
        alt="kelly-sikkema-4JxV3Gs42Ks-unsplash.jpg"
        title="kelly-sikkema-4JxV3Gs42Ks-unsplash.jpg" /></a><a href="https://domain.com/data/attachment-files/2020/06/1867909_green-chameleon-s9CC2SKySJM-unsplash.jpg"
        target="_blank" class="js-lbImage"><img src="https://domain.com/data/attachment-files/2020/06/thumb/1867909_green-chameleon-s9CC2SKySJM-unsplash.jpg"
        class="bbImage "
        style=""
        alt="green-chameleon-s9CC2SKySJM-unsplash.jpg"
        title="green-chameleon-s9CC2SKySJM-unsplash.jpg" /></a></div>
 
Mr. Jinx said:
That is correct, although not only Chrome but all modern browsers like Edge and Firefox support this new tag.
For a full list check: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Browser_compatibility

Xon's add-on has more features and is also using 3rd party scripts.
I created this add-on just to add lazy loading support using native browser tags, without extra javascript and with minimal impact.
So I would say this is a 'lite' version.
Click to expand...

Notably, it's not supported by macOS Safari or iOS Safari

Can I Use loading-lazy-attr? Data on support for the loading-lazy-attr feature across the major browsers from caniuse.com.

 
djbaxter said:
One could also argue that even if this doesn't improve user experience for all your members, it won't hurt those who can't use it and it will help those who can.
Click to expand...

Sure. It doesn't hurt. But depending on your site breakdown, it might not be helping as much as you might think.

And that's desktop marketshare, if you go to mobile, Safari is 26% and a blended desktop/mobile marketshare of 18%.

arn
 
Tried this. My speed scores were worse after I installed it. Uninstalled.

I've found the same thing with other lazy load addons/plugins including on WordPress.

Your mileage may vary, of course. Check your page load speeds before and after installing.
 
Last edited:
That seems very unlikely to me @djbaxter, it is possible that there is no effect in your case, but I highly doubt that it would give a negative effect as this addon only adds a tag.
 
Last edited:
FYI:
Checked many times by enabling and disabling the addon:
1. Accelerates downloads for PC.
2. But slows down loading for mobile...
 
It is just one of the many pagespeed recommendations. Don't expect miracles :)
This is also being used in XF 2.2 by default, adding the 'loading=lazy' tag to images. So this add-on won't be needed for the new XF 2.2.
 
You must log in or register to reply here.
Top Bottom