Lazy load spacer improvements

[aia]

Hello. I have some simple suggestions for lazy load spacer (i.e. the thing we see until image will be loaded):

1. Use correct height for spacer (i.e. height of the content which must be loaded), If it will use exact that space what it needs it  will prevent content from "jumping of elements" because of lazy loaded content.
2. Add a clear explanation that the content is loading (something like <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i> <br><span>Loading...</span>)

So instead of this (nothing in the middle of nowhere):

Users will see this:

 

Thank you.

[Matt]

When we rebuild the posts to add lazy loading, we do not know the dimensions of the image, so we can't create the spacer.

However, when you add new posts that have attachments, we do know the size and will create a spacer so you don't get the page jumping around.

[marklcfc]

Needs to start loading earlier to save the waiting around, the main reason I've not enabled it. We have alot of tweets posted and its painful waiting for those to load

[aia]

2 hours ago, Matt said:

when you add new posts that have attachments, we do know the size and will create a spacer so you don't get the page jumping around.

Looks like this does not works properly because the first screenshot from my previous post was made from new post which wasn't rebuilt and was just made for testing purposes :)

You can even reproduce this issue in this topic, just test it with super-slow throttling setting:


As there is no predefined "height" attribute in html code, it showed as 1px in height initially.

Height attribute is only added a lot later, when JS which sets it is loaded. I suggest to add height in html initially when posting instead of always calculating it with JS from dimensions ratio attribute, so it would not jump on slow internet and won't scare away new users who are on slow internet :)

[Rikki]

We can't set a fixed height on images because images need to remain responsive (i.e. scaling with the browser window). For that reason, we set a width and a ratio, and calculate the height using JS.

You are correct that on very slow connections, the JS can take a second or two to execute and add the placeholder, but even without lazy-loading, images would also 'jump' as the browser downloads them and inserts them into the page. This is unfortunately a trade-off, but for those on slow connections lazy-loading should ultimately be a benefit since their browser isn't having to load a bunch of images they aren't seeing yet.