Lazy Load [img] 2.8.0

[BuildBridges]

Is there any way to test that this is working?

I tested 2 pages with this ACTIVE and DISABLED and it showed zero improvement.

Using Google's tool ...

PageSpeed Insights

developers.google.com

I have permissions set to LazyLoad for unregistered users.

 

[Amin Sabet]

By any chance, is it possible to disable this addon only for a specific template or data-template?

I'd like to keep it globally enabled except for the front page of my website: https://www.mu-43.com/

Trying to figure out a way to have that front page be excluded from lazy loading

Thanks!

 

[Kevin]

By any chance, is it possible to disable this addon only for a specific template or data-template?

I'd like to keep it globally enabled except for the front page of my website: https://www.mu-43.com/

Trying to figure out a way to have that front page be excluded from lazy loading

Thanks!

If I remember correctly, Xon's is only lazy loading images embedded using the XF tags like "IMG" so by default the custom front end displaying images using standard HTML tags "IMG" tags aren't getting picked up.

 

[🔥Iggy🔥]

btw, regarding the gallery embeds not loading the blanks......i noticed that if i click/drag resize the embeds, even slightly, it can then notice what size they are and the blanks load fine.....is there not a way to have the lazy loader recognize the default size? or similar to however it recognizes attachment size?

it isnt very practical to expect ppl to do something like that for each image, and if they dont you cannot tell how many or where images are meant to load.

 

[ShinLim]

Hello @Xon, i got a question
I'm now using this kind for node icon

node.node--id.node-icon {
background: transparent url(https//xxx.com/image.png)

Can I use lazyload for this? How to lazyload defer off screen for background url from extra.less?

 

[Xon]

The lazy load stuff isn't setup to handle background images

 

[Fullmental]

I have a question regarding this. Once we enable lazy image loading and checked the box to inject a blank SVG to avoid odd pop-in, it seems the blank svg loading doesn't operate correctly. instead we get a lot of pop-in as images load if you scroll too fast or if the images take a bit to load due to a slow image provider or uncached request. We also get some odd automatic scrolling on mobile browsers, as reported by several users in our forum. Is the default setting not working any longer?

This is what was pre-populated when we installed the add-on:

data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='{width}' height='{height}' viewBox%3D'0 0 {width} {height}'%2F%3E

 

[Xon]

That is only used for attachments, instead of normal images. (as normally linked images have unknown dimensions)

These days I only have this enabled on spoiler'ed images which is a happy medium for images which aren't going to cause page jumps.

 

[Nirjonadda]

@Xon Do you have any change Upgrade lazysizes to 5.1.2 Latest release? Also please add style properties for the classes: lazyload, lazyloading, lazyloaded.

 

[Xon]

Xon updated Lazy Load [img] with a new update entry:

2.2.0 - feature update

• Update to lazysizes v5.1.2 from v4.1.4
• Add style properties for lazyload/lazyloading/lazyloaded classes

Read the rest of this update entry...

 

[Nirjonadda]

@Xon Do we need add this code in style properties or this code no more required, all are working by default?



Unveil effects
Add styling to your theme for the classes: lazyload, lazyloading, lazyloaded.

Fade in:

/* fade image in after load */
.lazyload,
.lazyloading {
    opacity: 0;
}
.lazyloaded {
    opacity: 1;
    transition: opacity 300ms;
}

Spinner

/* fade image in while loading and show a spinner as background image (good for progressive images) */

.lazyload {
    opacity: 0;
}

.lazyloading {
    opacity: 1;
    transition: opacity 300ms;
    background: #f7f7f7 url(loader.gif) no-repeat center;
}

 

[dethfire]

Updating to lazysizes 5 was important!

 

[Xon]

@Xon Do we need add this code in style properties or this code no more required, all are working by default?

View attachment 213594

Unveil effects
Add styling to your theme for the classes: lazyload, lazyloading, lazyloaded.

Fade in:

/* fade image in after load */
.lazyload,
.lazyloading {
    opacity: 0;
}
.lazyloaded {
    opacity: 1;
    transition: opacity 300ms;
}

Spinner

/* fade image in while loading and show a spinner as background image (good for progressive images) */

.lazyload {
    opacity: 0;
}

.lazyloading {
    opacity: 1;
    transition: opacity 300ms;
    background: #f7f7f7 url(loader.gif) no-repeat center;
}

The style property is simply a place to put the previous styling without editing templates. You'll need to manually move it.

 

[Xon]

Updating to lazysizes 5 was important!

I've noticed the Lighbox support may be buggy; but I've been using Advanced Bb Codes Pack which has the option to bruteforce disable Lightbox for everything which "fixes" it.

 

[Nirjonadda]

The style property is simply a place to put the previous styling without editing templates. You'll need to manually move it.

Sorry I do not understand about what code need add for Lazy loading, Lazy loading in progress and Lazy loading finished? Does Fade in: and Spinner code need add for both properties?

 

[Xon]

In; Lazy loading and Lazy loading in progress

opacity: 0;

In Lazy loading finished add;

opacity: 1;
transition: opacity 300ms;

 

[katoona]

Is it possible to add class="lazyload" to <img src.. in regular html widgets on the site?

 

[arn]

I'd love avatar support.

 

[Xon]

Is it possible to add class="lazyload" to <img src.. in regular html widgets on the site?

Yes, but you'll need to manually include the lazysize.min.js file.

 

[Nirjonadda]

@Xon What URL loader.gif need add for Spinner for Lazy loading in progress?

opacity: 1;
transition: opacity 300ms;
background: #f7f7f7 url(loader.gif) no-repeat center;