known issue IPS lazyloading does not work on dynamically loaded HTML elements (paginated, ajax loaded, etc)

[G17 Media]

Hello,

I've discovered a bug in how IPS' lazyloading works on dynamic elements.

in ./dev/js/library/app.js, line 61, you define a hook/override for $.fn.html. This makes sure that if dynamically loaded HTML contains lazyload elgible content, you instate the lazyload handler on it.

The problem seems to be instead of looping each lazyload element, ips.utils.lazyLoad.observe is called on the entire element. This then registers the IntersectionObserver on the entire element, causing each lazyloading element to be loaded straight away, defeating the point of the lazyload.

The fix is to instead call ips.utils.lazyLoad.observe on each lazyload capable element, like it's done elsewhere in the suite. I have patched this locally, but thought it would be useful to share to the IPS developers.

Happy new year!

Edited January 1, 2023 by G17 Media

[G17 Media]

Bump - this is a big issue for forums which are image or embed heavy and go beyond 1 page. This would also benefit those Cloud customers to fix 😉

Edited February 1, 2023 by G17 Media

[SeNioR-]

Bump2

[Afrodude]

5 hours ago, G17 Media said:

This would also benefit those Cloud customers to fix 😉

 

[Stuart Silvester]

17 hours ago, SeNioR- said:

Bump2

Bump3

 

I've logged an internal bug report so we can evaluate further. We do want to move more towards the native browser lazyload (such as we've done in Gallery) however we need to consider the trade-offs. The native functionality also has the same drawback as this bug where it won't work on dynamically loaded content.