Lazy Load [img]

Lazy Load [img] 2.2.1

No permission to download

katoona

Member
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?
 

Nirjonadda

Well-known member
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.

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

katoona

Member
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

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

Code:
opacity: 1;
transition: opacity 300ms;
background: #f7f7f7 url(/images/loader.gif) no-repeat center;
try it without the initial /
 

Iggy

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

Code:
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

Well-known member
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;

HTML:
<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.

Code:
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
 

katoona

Member
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.
 
  • Like
Reactions: Xon

mikez006

Member
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.
 

mikez006

Member
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

Well-known member
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

Well-known member
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.
 

mikez006

Member
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

Active member
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.
 

Eagle

Well-known member
I've installed it and works pretty well. And also, no need to use loader.gif or any css modification. Thanks Xon.
 
  • Like
Reactions: Xon
Top