Lazy Load [img] 1.3.1

[Xon]

I'm using this addon: https://xenforo.com/community/resources/recent-random-attachments-on-forum-homepage.1415/ to put recent attachments on forum_list. that has been developed by @Chris D but is distributed by the user @BamaStangGuy
is a paid addon ($5) but unfortunately is not supported. (the seller "Bamastanguy" never reply anything)
Could be possible extend the lazy loader to work with this addon?
if so, I can purchase a license to you, (if necessary / you want) plus I'm willing to make a donation.

I'm currently flat out at working on my other add-ons, and Fallout 4 release is coming up real-soon too so time-constrains are the major limiter for me.

I might be able be able to work something out, PM me and I will try to have a look as this should be quite simple with just a custom template modification depending on your needs.

That addon is for attachments. This addon already supports attachments. It doesn't support XenForo Media Gallery, which is an unrelated issue.

The addon supports attachments from bbcode, not add-ons which display arbitrary attachments.

 

[Amin Sabet]

Some of my members have noticed that the page is "jerky" if you scroll beyond a post with an image and that image loads after you've passed it. It causes the page content to get pushed downward (displacement).

Is it possible to show a placeholder image (or empty div) that is the same size (or at least same height) as the image it is loading to solve this issue?

 

[Xon]

Some of my members have noticed that the page is "jerky" if you scroll beyond a post with an image and that image loads after you've passed it. It causes the page content to get pushed downward (displacement).

Is it possible to show a placeholder image (or empty div) that is the same size (or at least same height) as the image it is loading to solve this issue?

This is technically a bit hard to-do, as the height isn't known till the image is loaded, at which point you didn't need the lazy loading bits.

Attachments or the image proxy could get around this, as they may already know the image dimensions.

Probably a better solution which will require some work, is to have the loading script hide images behind a placeholder until they are they are directly looked at to prevent the page jumping around. I'll have a look into it this weekend.

 

[Amin Sabet]

This is technically a bit hard to-do, as the height isn't known till the image is loaded, at which point you didn't need the lazy loading bits.

Attachments or the image proxy could get around this, as they may already know the image dimensions.

Probably a better solution which will require some work, is to have the loading script hide images behind a placeholder until they are they are directly looked at to prevent the page jumping around. I'll have a look into it this weekend.

Thanks, @Xon. Have you seen this?

https://github.com/aFarkas/lazysizes/blob/gh-pages/README.md

It looks like it solves the jank issue.

 

[rafass]

Thanks, @Xon. Have you seen this?

https://github.com/aFarkas/lazysizes/blob/gh-pages/README.md

It looks like it solves the jank issue.

That looks much better than showing the spinner.

 

[Xon]

Thanks, @Xon. Have you seen this?

https://github.com/aFarkas/lazysizes/blob/gh-pages/README.md

It looks like it solves the jank issue.

This still requires the width/height to be known, it does however look to be a better library to use.

 

[rafass]

Remember me instagram. looks really great.

 

[rafass]

I'm seeing that after post some attachments the spinner never ends.
The only way to see them is refresh the page.

 

[Amin Sabet]

I've seen that too.

 

[Xon]

I'm definitely hoping to switch the underlying lazy-load javascript this weekend. The lazysizes looks a lot better, and has much better performance too.

 

[rafass]

I'm definitely hoping to switch the underlying lazy-load javascript this weekend. The lazysizes looks a lot better, and has much better performance too.

Thank you sooooooo much!

 

[Xon]

Xon updated Lazy Load [img] with a new update entry:

Feature update release

Replaced lazyloading script 'unveil' with 'lazysizes. Browser support is at least IE9, or Firefox, or Chrome.

Provides a much smoother lazy-loading experience, and better client performance.

Unveil effects

Fade in

/* fade image in after load */
.lazyload,
.lazyloading {
	opacity: 0;
}
.lazyloaded {
	opacity: 1;
	transition: opacity 300ms;
}

Spinner

/* fade image in while loading and show a...

Read the rest of this update entry...

 

[Stuart Wright]

I noticed that if you link to a post down the page
e.g. https://www.phcorner.net/t/sync-portfolio.69539/#post-545705
the page scrolls to the wrong location.
Is this a known issue and irresolvable?

 

[Amin Sabet]

Latest update seems to affect the aspect ratio of images.

 

[Xon]

I noticed that if you link to a post down the page
e.g. https://www.phcorner.net/t/sync-portfolio.69539/#post-545705
the page scrolls to the wrong location.
Is this a known issue and irresolvable?

Even XenForo will do something similar if the images don't start loading fast enough when you skip to a post, especially if the anchor is at the bottom of the page like that. It is noticeable due to the odd-sized images near the view-port. Especially if you have a large screen.

When you are using attachments, my add-on puts the dimensions into the page to give the browser hints on how large the images will be to try to prevent re-flow.

Latest update seems to affect the aspect ratio of images.

Is this for attachments? or normal images? In spoilers/quotes?

I might not be doing the right thing when embedded the image dimensions for the attachment, as XenForo has some re-sizing javascript which may be interacting weirdly.

 

[Amin Sabet]

Is this for attachments? or normal images? In spoilers/quotes?

I might not be doing the right thing when embedded the image dimensions for the attachment, as XenForo has some re-sizing javascript which may be interacting weirdly.

I believe it was for normal embedded images but don't remember for certain. I've decided not to lazy load on my sites so can't really help troubleshoot.

 

[Stuart Wright]

I have encountered a reproducible problem when the Lazy Image Loader is active.
In this post: https://www.avforums.com/threads/ph...cent-purchases.1758415/page-175#post-22823333
With the addon active, the code for the Game of Thrones image is

<img src="https://www.avforums.com/attachments/image-jpeg.642242/" data-src="https://www.avforums.com/attachments/image-jpeg.642242/" alt="image.jpeg" class="bbCodeImage LbImage lazyloaded" width="3264" height="2448" style="">

The image is stretched:

and with the addon deactivated, the code is

<img src="https://www.avforums.com/attachments/image-jpeg.642242/" alt="image.jpeg" class="bbCodeImage LbImage" style="">

and the image is fine


I'm assuming the addon is getting the wrong dimensions from somewhere.
Is there a fix for this, please?

 

[Xon]

I'm assuming the addon is getting the wrong dimensions from somewhere.
Is there a fix for this, please?

Thanks for the bug report, I've isolated what is causing it and should hopefully have an update soon.

 

[Xon]

Xon updated Lazy Load [img] with a new update entry:

Bugfix release

Fix distortion image aspect ratio for attachments.

Read the rest of this update entry...

 

[Stuart Wright]

Xon updated Lazy Load [img] with a new update entry:

Bugfix release



Read the rest of this update entry...

Many thanks. Looking good.