Lazy Load [img] 2.6.0

[katoona]

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

I was thinking of adding this:
<script src="lazysizes.min.js" async=""></script>

I havent checked the addon-files yet, but doesnt the addon already load this file somewhere?

 

[🔥Iggy🔥]

@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;

i believe the idea is to select/upload your own

 

[Nirjonadda]

i believe the idea is to select/upload your own

Uploaded Then does this URL correct? but does not show the Spinner image when image are not loading.

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

 

[katoona]

I was thinking of adding this:
<script src="lazysizes.min.js" async=""></script>

I havent checked the addon-files yet, but doesnt the addon already load this file somewhere?

There is an option: Enable outside thread view/conversations, but I am not 100% sure what triggers the js.file to be included in the pagewrapper. On pages like thread views you see this in pagewrapper: "<script.. src="/ xxx / js / sv / lazyimageloader/ lazysizes.min.js?_v=073bc8fd"></script>", but on other pages this is not included, and hence you need to add the file. I get that, but would it not be easier to have this file loaded on all pages and then avoid having the file loaded twice on certain pages? The file is small and don't affect page speed that much. I am not saying that my solution is a good solution for everybody, but I want the file to load on all pages since I have img-src images both here and there, and it would be easier to just add class=lazzyload on "other" pictures manually, and not worry if the js file is being loaded on that page.

 

[🔥Iggy🔥]

Uploaded Then does this URL correct? but does not show the Spinner image when image are not loading.

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

try it without the initial /

 

[Nirjonadda]

try it without the initial /

Not fixed but now this image are not load in web browser console.

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

 

[🔥Iggy🔥]

Not fixed but now this image are not load in web browser console.

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

i believe the opacity should be 0 here.....
and being sure and clear this is applied to .lazyloading

otherwise that is the exact code we used...i have since changed to the fade but that should work by some logic ;P

edit: oh we didnt put the 300ms in this spot either fwiw...

 

[Xon]

There is an option: Enable outside thread view/conversations, but I am not 100% sure what triggers the js.file to be included in the pagewrapper. On pages like thread views you see this in pagewrapper: "<script.. src="/ xxx / js / sv / lazyimageloader/ lazysizes.min.js?_v=073bc8fd"></script>", but on other pages this is not included, and hence you need to add the file. I get that, but would it not be easier to have this file loaded on all pages and then avoid having the file loaded twice on certain pages? The file is small and don't affect page speed that much. I am not saying that my solution is a good solution for everybody, but I want the file to load on all pages since I have img-src images both here and there, and it would be easier to just add class=lazzyload on "other" pictures manually, and not worry if the js file is being loaded on that page.

If you enable "Enable outside thread view/conversations", it does inject the relevant js if the lazyload stuff is detected as used. You can do this by then doing the following;

<xf:set var="$src" value="https://example.com/favicon.ico" >
<xf:if is="$__globals.lzhelper">
    <img src="{{ $__globals.lzhelper.getUrl($__globals, $src)|raw }}" class="{{ $__globals.lzhelper.getCss($__globals)|raw }}" />
    <xf:if is="$__globals.lzhelper.isNotScripBlockNeeded($__globals)">
        <noscript><img src="{{ $src|raw }}" /></noscript>
    </xf:if>
<xf:else>
    <img src="{{ $src|raw }}" />
</xf:if>

This will support when the add-on is disabled, and when the user has javascript disabled. It is kinda ugly, and I'ld probably wrap it in a template modification to template macro if I was doing it more often.

Uploaded Then does this URL correct? but does not show the Spinner image when image are not loading.

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

I never got around to including a loader.gif in the redistributable zip for this add-on

 

[Nirjonadda]

I never got around to including a loader.gif in the redistributable zip for this add-on

I have uploaded my own image but does not show the Spinner image when image are not loading.

 

[katoona]

If you enable "Enable outside thread view/conversations", it does inject the relevant js if the lazyload stuff is detected as used. You can do this by then doing the following;

Thanks for your reply. It is a nice addon by the way and in my opinion a must-have for forums that have lots of threads with tons of pictures.

 

[mikez006]

I installed this on my site, but I can't tell if it's working or not. I don't see any difference.

I should mention when someone uploads an image to my site, we host it on a CDN and delete the original image. I'm wondering if this could be why I don't notice a difference.

 

[dethfire]

I don't see any difference.

How are you measuring?

 

[mikez006]

I'm loading a thread that has some images below the fold, but I don't see any loading or fading in or anything. The images are just there, so I'm not sure if it's working or not.

 

[dethfire]

I'm loading a thread that has some images below the fold, but I don't see any loading or fading in or anything. The images are just there, so I'm not sure if it's working or not.

It's working, when done right, you don't notice a difference. Why would you want loading time and fading in? The user should not know the difference.

 

[Kevin]

I'm loading a thread that has some images below the fold, but I don't see any loading or fading in or anything. The images are just there, so I'm not sure if it's working or not.

If you're on a fast pipe you really shouldn't notice any difference. One quick way of telling is to use something like Chrome's dev' tools and take a look at the network tab; if you're on a page with a lot of graphics then as you scroll down the page you should see the network connections being made to request the images as they come into the viewport.

 

[Xon]

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

2.2.1 - Maintenance update

• Improve extending XF js to be better compatible with other add-ons

Read the rest of this update entry...

 

[mikez006]

One quick way of telling is to use something like Chrome's dev' tools and take a look at the network tab; if you're on a page with a lot of graphics then as you scroll down the page you should see the network connections being made to request the images as they come into the viewport.

Good suggestion. I loaded up a page with 10 images, opened up the console to the network tab and saw that all the images loaded as soon as the page loaded so there must be a conflict somewhere.

Any suggestions on how to troubleshoot this?

 

[Rhodium]

Good suggestion. I loaded up a page with 10 images, opened up the console to the network tab and saw that all the images loaded as soon as the page loaded so there must be a conflict somewhere.

Any suggestions on how to troubleshoot this?

Setup permissions in usergroup.

 

[mikez006]

Setup permissions in usergroup.

That was it. thanks. I see it's working now

 

[Eagle]

I've installed it and works pretty well. And also, no need to use loader.gif or any css modification. Thanks Xon.