Lazy Load Background Images with the IntersectionObserver API | DebugBear

While we can defer offscreen images using the loading HTML attribute, lazy loading background images takes a bit more work. Since they are added by CSS rather than HTML, we need to use JavaScript to detect when offscreen background images are about to enter the user’s viewport.It would be nice to have a native background-loading: lazy property in CSS as well, but unfortunately, it doesn’t currently exist. Luckily, the IntersectionObserver API provides a performance-friendly solution to lazy load background images without having to manually add JavaScript event listeners and perform viewport calculations, or use a third-party library.In this article, we’ll look into how to lazy load background images using the background CSS property and the IntersectionObserver JavaScript API.

Source: Lazy Load Background Images with the IntersectionObserver API | DebugBear