Lazy Load [img]

Lazy Load [img] 1.3.1

No permission to download
Overview FAQ Updates (13) Reviews (3) History Discussion
Also, can anyone suggest how to deal with this delay on page load please?
To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.
this is a screencast from a machine on a fast internet connection pulling images from a CDN, yet it's as though there's a significant delay.
Do I just need to add the css styling or is there something else I should be doing?
Skipping lazy load for image #1 on the page would work really well for us if there's any way that could be possible?
thanks,
James
 
StarArmy said:
Isn't the purpose of this add-on literally to add a delay to image loading?
Click to expand...
:) The purpose is not to add a delay to the loading of all images, but to delay the load of any images which are outside of the viewable area until just before you scroll down to that part of the page.
 
DWJames said:
Hi, is it correct that I don't have fields for setting the threshold value and the lazyload spinner in the admin with the latest version installed (1.2.2)
View attachment 150343
Click to expand...
The threshold system is hardcoded into lazysizes, and this add-on doesn't surface most of the options.

The options are old, and I've updated the screenshot. To add the spinner you must use CSS per the description.
 
Hello, thank you for an excellent addon. I really like the cleanliness of the interfacing with XenForo. Not much in regards of hacks :).

I am making a few improvements, so I was hoping you have a Github repository or something where I can submit a pull request.

My changes modify the helper method SV_LazyImageLoader_Helper::getLazySpinnerUrl to insert a replacement SVG image (data:// url) with the height and width of the lazily loaded image to provide exact width and height of the image which resizes with the aspect ratio similar to the original one. What this does is completely eliminate any jankiness when scrolling past images that are not yet loaded.

So far I have only done it for attachments, but gallery images should be easy too. Image Proxy images will unfortunately not be possible without a modification to the image proxy to make it save the width and heights of images. Shouldn't be hard at all though.

Here are my changes so far:
Code: 
diff --git a/library/SV/LazyImageLoader/Helper.php b/library/SV/LazyImageLoader/Helper.php
index d923645..9c08599 100755
--- a/library/SV/LazyImageLoader/Helper.php
+++ b/library/SV/LazyImageLoader/Helper.php
@@ -27,12 +27,21 @@ class SV_LazyImageLoader_Helper

     public static function getLazySpinnerUrl($content, $params, XenForo_Template_Abstract $template)
     {
+        $originalUrl = is_array($params) ? $params['url'] : $params;
         if (SV_LazyImageLoader_Helper::$enable_lazyloading)
         {
-            return  '" data-src="' . $params;
+            $placeholder = '';
+            if (is_array($params))
+            {
+                $width = $params['width'];
+                $height = $params['height'];
+                $placeholder = "data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 {$width} {$height}'%2F%3E";
+            }
+            // Insert an SVG with proper aspect ratio to make responsive design work smoothly
+            return $placeholder . '" data-src="' . $originalUrl;
         }

-        return $params;
+        return $originalUrl;
     }

     static $enable_lazyloading = null;
diff --git a/library/addon-SV_LazyImageLoader.xml b/library/addon-SV_LazyImageLoader.xml
index ad5438a..2e02837 100755
--- a/library/addon-SV_LazyImageLoader.xml
+++ b/library/addon-SV_LazyImageLoader.xml
@@ -58,7 +58,7 @@
     </modification>
     <modification template="bb_code_tag_attach" modification_key="sv_lazyimageloader_bb_code_tag_attach" description="Lazy Image Loader" execution_order="10" enabled="1" action="preg_replace">
       <find><![CDATA[#(<img\s+src=")([^"]*)(".*?class="[^"]*)("\s*?/>)#is]]></find>
-      <replace><![CDATA[$1<xen:callback class='SV_LazyImageLoader_Helper' method='getLazySpinnerUrl' params='$2' />$3 <xen:callback class='SV_LazyImageLoader_Helper' method='getLazySpinnerCss' params='{xen:array 'full={$full}', 'attachment={$attachment}', 'extra=$4', 'noscript={$1$2$3$4}'}' />]]></replace>
+      <replace><![CDATA[$1<xen:callback class='SV_LazyImageLoader_Helper' method='getLazySpinnerUrl' params='{xen:array 'url=$2', 'width={$attachment.width}', 'height={$attachment.height}'}' />$3 <xen:callback class='SV_LazyImageLoader_Helper' method='getLazySpinnerCss' params='{xen:array 'full={$full}', 'attachment={$attachment}', 'extra=$4', 'noscript={$1$2$3$4}'}' />]]></replace>
     </modification>
     <modification template="bb_code.css" modification_key="sv_lazyimageloader_bb_codecss_1" description="Add NoJs support" execution_order="10" enabled="1" action="preg_replace">
       <find><![CDATA[#$#]]></find>
 
Appears the .js is being inserted into template(s) twice ...

Code: 
<script src="https://cdn.mysite.com/js/SV/LazyImageLoader/lazysizes.min.js" async=""></script>

<script src="https://cdn.mysite.com/js/SV/LazyImageLoader/lazysizes.min.js" async=""></script>
 
@Mouth on my own sites the .js files is injected once. It is a fairly simple template modification which appends to the end of the file, so it is likely a conflict with another add-on.

Best way to troubleshoot this is filter by the page_container_js_head template, and disable things one-by-one until the duplicated line goes away.
 
Xon said:
@Mouth on my own sites the .js files is injected once. It is a fairly simple template modification which appends to the end of the file, so it is likely a conflict with another add-on.

Best way to troubleshoot this is filter by the page_container_js_head template, and disable things one-by-one until the duplicated line goes away.
Click to expand...
Same problem here. I moved some js code I added on page_container_js_head and delete some blank row and the duplicate disappeared. I really don't know why as your regex simply take all and replace with all+1 row.
:confused:
 
I'm not sure yet what the cause is but since switching to bd attachment store, some thumb images do not display. This happened today in XFMG and AMS. Rebuilding thumbs doesn't help.
 
Thumbs fail for all new images added since I ran the combination of lazy load, attachment improvements and bd attach.
When I disabled
lazy load and attachment improvements and rebuild thumbs then everything started working again.
So there seems to be an addon conflict there.
 
You must log in or register to reply here.

Similar threads

AndyB
Remove lazy load [Paid]
Replies
0
Views
422
AndyB
AndyB
CinVin
[CinVin] Lazy Load YouTube Videos [Deleted]
Replies
9
Views
1K
CinVin
CinVin
Mr. Jinx
[OzzModz] Lazy Load Images
2 3
Replies
43
Views
5K
Ozzy47
Ozzy47
AndyB
Remove lazy loading [Deleted]
Replies
1
Views
694
AndyB
AndyB
X
Lazy Load [img]
10 11 12
Replies
230
Views
21K
Xon
X
Top Bottom