How to implement lazy loading of images in JavaScript?

How to implement lazy loading of images in JavaScript?

With the development of mobile Internet, the number of pictures on web pages is increasing, which makes page loading speed slower and user experience degraded. In order to solve this problem, the image lazy loading function came into being. Lazy loading of images means that when the user scrolls to the image position, the image is loaded again to improve the loading speed of the web page. This article will introduce how to use JavaScript to implement lazy loading of images and provide specific code examples.

1. First, we need to mark a specific attribute for the image to be lazy loaded. In this example, we use "data-src" as the tag attribute and store the real address of the image in this attribute.

<img src="placeholder.jpg" data-src="image.jpg" alt="Lazy Load Image">

2. Next, we need to listen to the page scroll event through JavaScript and determine whether the image enters the visible area.

function lazyLoadImages() {
    var lazyImages = document.querySelectorAll('img[data-src]');
    
    lazyImages.forEach(function(img) {
        if(isElementInViewport(img)) {
            img.src = img.getAttribute('data-src');
            img.removeAttribute('data-src');
        }
    });
}

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= window.innerHeight &&
        rect.right <= window.innerWidth
    );
}

window.addEventListener('scroll', lazyLoadImages);
window.addEventListener('resize', lazyLoadImages);

3. When the browser scrolls or resizes the window, the scroll and resize events will be triggered. We can use these two events to Call the lazyLoadImages function to determine and load images.
4. Finally, execute the lazyLoadImages function immediately after the page is loaded to load the images in the visible area of ​​the first screen.

window.addEventListener('load', lazyLoadImages);

Through the above four steps, we can implement the lazy loading function of images. When the user scrolls to the image position, the image will automatically load, thereby improving page loading speed.

Summary:
Lazy loading of pictures is to store the real address of the picture in a specific attribute, and to judge whether the picture enters the visible area by listening to the events of page scrolling and window resizing, and based on the judgment results. Load images. This technology is particularly important on mobile devices and in environments with poor network performance, to improve user experience and reduce server load.

The above is an introduction to how JavaScript implements the lazy loading function of images, and provides corresponding code examples. Hope this helps!

The above is the detailed content of How to implement lazy loading of images in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!