Adjust Lazy Load speed

[maddog107_merged]

If you have a slow internet connection when you are scrolling through image heavy posts, the images load while they are in the the viewport. Lazy Load should load picture *just* outside that view port (e.g. if viewing post X, it should start loading X+1 or 300px outside of viewport or something). This is more inline with what Instagram/facebook does. 

In generic lazy load libraries there is usually a setting like the following:

https://appelsiini.net/projects/lazyload/v1/

Setting Threshold
By default images are loaded when they appear on the screen. If you want images to load earlier use threshold parameter. Setting threshold to 200 causes image to load 200 pixels before it appears on viewport.

$("img.lazy").lazyload({
    threshold : 200
});

 

Any idea on how to implement this on IPB? Or is it doable with a plugin? Any insight would be appreciated. 

 

You can see the images popping up around the 18second mark. 

https://bellazon.com/scroll_through.mp4

 

 

[bfarber]

We already do begin loading images when they are just outside of the viewport. 🙂 In fact, when Matt was working on the blog entry for lazy loading and attempting to take a video to show it in action, he had a lot of trouble doing so because the images were typically already loaded by the time he reached them.

[maddog107_merged]

3 hours ago, bfarber said:

We already do begin loading images when they are just outside of the viewport. 🙂 In fact, when Matt was working on the blog entry for lazy loading and attempting to take a video to show it in action, he had a lot of trouble doing so because the images were typically already loaded by the time he reached them.

 

So is there a way to customize it? A setting somewhere I can modify to increase it even more? Just the function name or something would be helpful. Thanks. 

[bfarber]

The javascript code is stored in the database, and then recompiled on demand to be cached into your file storage handler. You really can't "edit" javascript files within our framework very easily.

But to answer your question, ips.utils.lazyLoad.js defines this which is what you'd want to change:

var _rootMargin = "50px";

 

[Yamamura]

1 hour ago, bfarber said:

But to answer your question, ips.utils.lazyLoad.js defines this which is what you'd want to change:

var _rootMargin = "50px";

I think this distance is too small. One scroll step on my mouse is 90px. I think image loading should start at about 300px outside of the viewport.

[maddog107_merged]

11 minutes ago, Takohashi said:

I think this distance is too small. One scroll step on my mouse is 90px. I think image loading should start at about 300px outside of the viewport.

Thats what I have been saying! And it appears the default for a lot of lazy load libraries is 300px 😕

 

[maddog107_merged]

1 hour ago, bfarber said:

The javascript code is stored in the database, and then recompiled on demand to be cached into your file storage handler. You really can't "edit" javascript files within our framework very easily.

But to answer your question, ips.utils.lazyLoad.js defines this which is what you'd want to change:

var _rootMargin = "50px";

 

 

Thanks. I set it in the DB and flushed cache and i see it reflected in the root_framework.js source.

 

;(function($,_,undefined){"use strict";ips.createModule('ips.utils.lazyLoad',function(){var _observer;var _rootMargin="300px";var _threshold=0;var _supportsObserver=true;var _registry={};var _document=$(document);var contentSelector="img[data-src], [data-background-src], iframe[data-embed-src], video[data-video-embed]";var init=function(){if(!window.IntersectionObserver||_.isUndefined(window)){_supportsObserver=false;}},observe=function(node,callbacks,config){var rawNode=node;if(node instanceof $){rawNode=node.get(0);}

 

I'll see if our users can test to see if its better.

In case anyone is crazy like me and wants to change it, ill leave this here (table name: *_core_javascript)  and you can figure out what you need to change. 

javascript_id
javascript_plugin
javascript_type
javascript_content
javascript_version
javascript_app
javascript_path
javascript_location
javascript_position
javascript_name
javascript_key
Look up key


12700
framework
/**
* Invision Community
* (c) Invision Power ...
104007
global
common/utils
framework
1000400
ips.utils.lazyLoad.js

 

[Ryan Ashbrook]

Bear in mind, that will get overwritten on every upgrade.

[marklcfc]

You need to load sooner, it’s most noticeable for tweets, you’re left waiting 2 seconds till it appears. It’s the only reason I’ve not enabled it, but I do want to. Compare the delay to xenforo where it’s hardly noticeable

[jair101]

I want to bump this. 50px seems too conservative and when you scroll a post with many image attachments delays happen. If it is not possible to make it custom setting, at least increase this value. 

[marklcfc]

9 hours ago, jair101 said:

I want to bump this. 50px seems too conservative and when you scroll a post with many image attachments delays happen. If it is not possible to make it custom setting, at least increase this value. 

Agreed, at least give us the custom option

[Adlago]

Why not try something else instead of a lazy load?
After long experiments, I received a small script that works great for me.

<script>
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
""
)
</script>

Put this script before close the tag head in global template (but before you need to stop a lazy load).
This script creates a preload for all images  and speeds up the loading site.

Repeatedly tested by me, not only on my site.

[bfarber]

Lazy-loading and pre-loading are pretty much two completely different things. Lazy loading can help reduce bandwidth usage for your site and also potentially allow your site to load faster within the browser because the images are not loaded until they are scrolled into the viewport. Pre-loading would try to help images display quicker by requesting them in separate threads early on in page execution so that the cached copies can be used later.

Your script, as-is, does not look like it would do anything, however. It's calling the preload() javascript function with just an empty string, so it would attempt to create an image and set its src to an empty string, effectively doing nothing.

[Adlago]

11 minutes ago, bfarber said:

Lazy-loading and pre-loading are pretty much two completely different things. Lazy loading can help reduce bandwidth usage for your site and also potentially allow your site to load faster within the browser because the images are not loaded until they are scrolled into the viewport. Pre-loading would try to help images display quicker by requesting them in separate threads early on in page execution so that the cached copies can be used later.

Your script, as-is, does not look like it would do anything, however. It's calling the preload() javascript function with just an empty string, so it would attempt to create an image and set its src to an empty string, effectively doing nothing. 

Yes, it is - the script is empty. In small amounts of images - up to 10 pieces, this script eliminates a delay in the loading site reported PSI.
It's odd - but that's a fact, and a script has been obtained after many experiments.

I use another script - which shifts the loading images after time "onload". This is also associated with a small edditing in code loading the images - after your lazy load code - and that works very well. Ie. if a lazy load is enable - it also works, if a lazy load is disable - the images are loaded by my method.

How long does the image onload - depending on the amount of images in the page site. With a large number of images, a time onload can be selected, for example, 3.5 seconds / with this experimentally time, a site with too many images and reported by PSI 24 seconds delay for mobile - already running at double speed loading (from 30- 35-> 60-65) and no report of image delays.
Lazy load creates many unpleasant scrolling experiences.
I personally do not like lazy load - and I do not use it. But on my observations on other sites - it does not work well.

[Day_]

Not sure if this belongs in this topic, but my one issue with lazy loading is images not showing after clicking submit reply.

If your post has say one gif, it will show as an empty post until you reload the page.

Not all users think to reload before attempting to post the image again.

Having the detection zone increased would be nice I guess, although I can say it’s overly bothered me too much.

I’m still in the honeymoon period where everything is great as embeds are not jumping the page around which creates a game of whack a mole 

[Stuart Silvester]

4 hours ago, day_ said:

Not sure if this belongs in this topic, but my one issue with lazy loading is images not showing after clicking submit reply.

If your post has say one gif, it will show as an empty post until you reload the page.

Not all users think to reload before attempting to post the image again.

Having the detection zone increased would be nice I guess, although I can say it’s overly bothered me too much.

I’m still in the honeymoon period where everything is great as embeds are not jumping the page around which creates a game of whack a mole 

If you can reliably reproduce the issue with posting an image, I would recommend submitting a support ticket, please include information about which browser you are using.

[Day_]

56 minutes ago, Stuart Silvester said:

If you can reliably reproduce the issue with posting an image, I would recommend submitting a support ticket, please include information about which browser you are using.

I can’t, for me the image doesn’t load initially into the post but scrolling up and back most of the time reveals the image. Occasionally it won’t and I have to reload the page but wouldn’t be able to give you the exact steps to replicate as it’s a 1 in 20 type thing.

It’s the members which are the worst, they see it doesn’t show then repeat the post, this is despite me telling them several times to scroll up and back down or reload. I’m not working with the brightest of members at times, and that’s coming from me. 

[asigno]

@bfarber As Chrome 75 natively supports lazy loading, are there any plans to make use of this and then use the lazy loading script as a fall back?

https://addyosmani.com/blog/lazy-loading/

"Chrome’s lazy-loading implementation is based not just on how near the current scroll position is, but also the connection speed."

[bfarber]

14 hours ago, asigno said:

@bfarber As Chrome 75 natively supports lazy loading, are there any plans to make use of this and then use the lazy loading script as a fall back?

https://addyosmani.com/blog/lazy-loading/

"Chrome’s lazy-loading implementation is based not just on how near the current scroll position is, but also the connection speed."

I can't speak as to "plans" but it's something we're aware of.

[marklcfc]

Any progress on making these load a bit earlier 

[aia]

On 3/1/2019 at 4:24 PM, bfarber said:

 In fact, when Matt was working on the blog entry for lazy loading and attempting to take a video to show it in action, he had a lot of trouble doing so because the images were typically already loaded by the time he reached them.

Is that a joke? Don't you're using throttling, especially for mobile testing, guys? It's explains a lot on load performance of IPS for me :(

[bfarber]

On 7/7/2019 at 2:16 AM, Mr 13 said:

Is that a joke? Don't you're using throttling, especially for mobile testing, guys? It's explains a lot on load performance of IPS for me 😞

Do we test with throttling? Sure, when needed. You don't generally need to enable throttling to test mobile.

Does anyone here leave throttling enabled? Of course not, that would be silly.