I was thinking of adding this:Yes, but you'll need to manually include thelazysize.min.js
file.
<script src="lazysizes.min.js" async=""></script>
I havent checked the addon-files yet, but doesnt the addon already load this file somewhere?
I was thinking of adding this:Yes, but you'll need to manually include thelazysize.min.js
file.
i believe the idea is to select/upload your own@Xon What URLloader.gif
need add for Spinner forLazy loading in progress
?
Code:opacity: 1; transition: opacity 300ms; background: #f7f7f7 url(loader.gif) no-repeat center;
i believe the idea is to select/upload your own
opacity: 1;
transition: opacity 300ms;
background: #f7f7f7 url(/images/loader.gif) no-repeat center;
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?
try it without the initial /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 /
opacity: 1;
transition: opacity 300ms;
background: #f7f7f7 url(images/loader.gif) no-repeat center;
i believe the opacity should be 0 here.....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;
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;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.
<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>
I never got around to including aUploaded 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;
loader.gif
in the redistributable zip for this add-onIf 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;
How are you measuring?I don't see any difference.
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.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.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.
- Improve extending XF js to be better compatible with other add-ons
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.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?
That was it. thanks. I see it's working nowSetup permissions in usergroup.
We use essential cookies to make this site work, and optional cookies to enhance your experience.