Topic: Lazy Loading
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.
Can you prepare an example snippet for me to look into?
jseird pro premium priority commented 11 months ago
https://mdbootstrap.com/snippets/standard/uniqueopia/5935353
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 pro premium priority commented 11 months ago
Seems related to viewport or so - Grzegorz Bujański answer is working just fine.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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