Lazy Load [img] 1.3.1

[BobbyWibowo]

From what I can tell, adding lazyload class will simply apply the default 0 opacity styling. And once it's visible in view, the add-on will kick in and load the image if it's an image element. And once loaded, it'll replace the class with lazyloaded. I assume the add-on presumed the icons as already loaded when it's in view and replace the class with lazyloaded immediately (?).
So technically speaking, it won't "lazyload" the icons, mostly since it's Font Awesome in this case. Font Awesome is a font, and it'll always be downloaded in page load unless you've specifically wrote a script that will defer the fonts load. I can't see any benefit to add the lazyload class of this add-on. It'll only give the fading effect, but that's all there is to it.

 

[Nirjonadda]

What the Difference with this addon ? https://*******.com/resources/image-lazy-loader.330/

 

[BobbyWibowo]

@Nirjonadda That add-on couldn't be posted here, but this one could, lol

 

[Anthony Parsons]

I think a good read for this development: https://varvy.com/pagespeed/defer-images.html

It would be simpler to just use a base64 image, that way no real call is being made.

I would love to see this include avatars too... you would cut a busy threads server requests from a hundred to about 15 requests.

Would really love a full scale lazy load image option that goes beyond just attachments, and caters all forum pages.

 

[Stuart Wright]

I think a good read for this development: https://varvy.com/pagespeed/defer-images.html

It would be simpler to just use a base64 image, that one no real call is being made.

I would love to see this include avatars too... you would cut a busy threads server requests from a hundred to about 15 requests.

Would really love a full scale lazy load image option that goes beyond just attachments, and caters all forum pages.

Anthony, why don't you post this as a suggestion? Or reply to the thread if there is already one?

 

[Anthony Parsons]

Or reply to the thread if there is already one?

I went looking in suggestions and found that this had been created, awaiting to see if Xon wants to take this one to the next level, or whether what is being asked is too much work for this one, and a whole new add-on is needed.

 

[Amin Sabet]

Would really love a full scale lazy load image option that goes beyond just attachments...

Just to clarify for anyone reading - this addon does lazy load embedded (hotlinked) images in addition to attachments.

 

[Anthony Parsons]

Yes, I get that with it doing attach and img, but there are more images present in a page that each cause a request. Avatars are the worst offender per page, every page, not just threads, as everywhere you use avatars (which is a bread a butter staple of XF for members accessibility), then each avatar is a page request.

Lazy loading too, depending on how it is done (i.e. like inserting a fake image first then load the real) is still not optimal always optimal in relation to page requests on actual page loading. This is why shifting to say a base64 is ideal, and every image is being covered into a single lazy load request.

If you have 30 posts per page, and each one is from a different member, that is 30 requests just for each posters avatar. Then if any posts have images, then say another one for the smilie sprite, then if you use images in your theme, again. The list goes on.

Performance is EVERYTHING now for search exposure due to Google placing such importance on it due to most web browsing now being primarily a mobile experience. If you do nothing to your website except improve its speed, your site will start seeing much more traffic.

 

[Amin Sabet]

Another feature request for @Xon

Can you please add support for lazy loading on the Featured Threads Page from CTA Featured Threads & Portal?

I use that addon as the home page of my sites. Example: https://www.mu-43.com/

 

[Amin Sabet]

@Xon

One of my members is saying that when he attaches images to a post in one thread and then embeds them in a different thread by using BBcode, that they only show up in that second thread if he disables lazy loading (which I made optional).

Are you aware of any such issue or why that might occur?

 

[Xon]

@Amin Sabet It depends how the user embeds the image.

There is a bug where if you post a new post, or reply to a thread with lazy load enabled and the script hasn't been loaded; it will fail to properly display the image. This is on my todo list to fix.

But I will need to have a lot at the attachment handling.

 

[Nuno]

Hi

I was using a js function to load a preload image on error so I can replace the no existent image with a no image indicator.
When using Lazyload this won't work, but I notice there is a lazyerror class we can use.

Any ideia ao to apply this class in case of a missing image?

Thanks

 

[Nuno]

OK ... my previous script was not working, but this ones works:

<script>
$(document).ready(function()
{
    $("img.bbCodeImage").on("error", function(){
        $(this).attr('src', '/styles/default/xenforo/noimage.png');
    });
});
</script>

 

[Joeychgo]

OK -- I'm a little dense. Could someone please explain to me what this addon actually does? I think I get the idea -- but it would be great if someone could actually explain it to me.

 

[m1ne]

OK -- I'm a little dense. Could someone please explain to me what this addon actually does? I think I get the idea -- but it would be great if someone could actually explain it to me.

Images don't load until you are ready to see them, drastically lowering page load time if you have lots of images.

 

[Joeychgo]

Images don't load until you are ready to see them, drastically lowering page load time if you have lots of images.

Thank you... Does this apply to all images or just newly uploaded ones?

 

[m1ne]

All of them.

 

[Amin Sabet]

OK ... my previous script was not working, but this ones works:

<script>
$(document).ready(function()
{
    $("img.bbCodeImage").on("error", function(){
        $(this).attr('src', '/styles/default/xenforo/noimage.png');
    });
});
</script>

Thank you very much for this! I have lazy load as a user configurable option on my site. Will this still work if a member turns off lazy load?

 

[Nuno]

Thank you very much for this! I have lazy load as a user configurable option on my site. Will this still work if a member turns off lazy load?

Yes.

 

[Xon]

I'll have a look at what can be done to support the CDN option.