How do I implement lazy loading in my web application?

How do I implement lazy loading in my web application?

Lazy loading is a design pattern that postpones loading non-essential resources until they're needed. Would you like to see an example?

Yes, please provide an example of how to implement it in JavaScript.

You can use the Intersection Observer API to detect when an element is in the viewport. Here's a simple example:

const images = document.querySelectorAll('img[data-src]');
const config = { rootMargin: '0px 0px 50px 0px', threshold: 0 }; 

let observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve(img);
        }
    });
}, config);

images.forEach(image => {
    observer.observe(image);
});

This code will load images only when they are about to enter the viewport.

That looks great! How can I implement lazy loading for videos?

You can use a similar approach for videos. Just replace the image elements with video elements and use the data-src attribute for the video source. Here's an example:

<video data-src="video.mp4" controls></video>

And in your JavaScript, you can set the src attribute when the video is in view, just like with images.