Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

jseird priority asked 11 months ago


Expected behavior

Images to load when scrolling a List Group within a container (name it scrollbox here) of fixed height and .overflow-auto class applied on it.

Actual behavior

While the group-list inside scrolls correctly only the first images are shown correctly, meant the final image replaces the placeholder. For other images that are not visible at the beginning only the placeholder is displayed. This indicates the lazy loading is applied correctly. Scrolling within the scrollbox container does not trigger the load of the final image for other images. However if scrolling up or down on the hole site (website that contains the scrollbox container) even slightly by 1 pixel up or down the images inside the scrollbox are show correctly, their final image is displayed respectively.


David Smith free answered 9 months ago


Thank you, Grzegorz Bujański! It has worked.


dwightray free answered 10 months ago


It seems like you're experiencing some issues with lazy loading images within a scrollable container. The expected behavior is for images to load as you scroll down the list group, but only the first images are displayed correctly while the rest show as placeholders until the page is scrolled slightly up or down. Have you checked if there are any specific settings or configurations related to lazy loading or image rendering that might be causing this behavior?


jseird priority commented 10 months ago

Seems related to viewport or so - Grzegorz Bujański answer is working just fine.


Grzegorz Bujański staff answered 10 months ago


Add data-mdb-lazy-load-init to the ul element. This should solve the problem.


Kamila Pieńkowska staff answered 10 months ago


Can you prepare an example snippet for me to look into?


jseird priority commented 10 months ago

https://mdbootstrap.com/snippets/standard/uniqueopia/5935353



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.1.0
  • Device: macBook, iPhone
  • Browser: Safari, Chrome
  • OS: macOS, iOS
  • Provided sample code: No
  • Provided link: No