RadListBox now supports lazy loading of images to improve performance when many items have images.
You can enable the functionality by setting the EnableImageLazyLoading
property to true. When enabled, images are loaded only when items scroll into the visible
area, significantly reducing initial page load time for lists with many images.
When image lazy loading is turned on, RadListBox will render images with a data-src
attribute instead of src. As items enter the viewport, their images are
activated automatically using an IntersectionObserver (with a scroll-based fallback
for older browsers). A 50px margin is used to preload images just before they become visible,
ensuring a smooth scrolling experience.
Image lazy loading works with both statically declared items and dynamically added items.
It is also compatible with the existing Load on Demand feature - images within
newly loaded batches are automatically observed and loaded as they scroll into view.
Lazy loading is triggered in the following scenarios:
- Initial render - only images in the visible viewport (plus a 50px buffer) are loaded on page load.
- Scroll - as the user scrolls, images entering the viewport are loaded on demand.
- Dynamically added items - items added via client-side API or
Load on Demand callbacks automatically participate in lazy loading.