Implementing Image Lazy Loading

Image lazy loading is a technique used when a webpage needs to display a large number of images. Instead of loading all the images at once, only the images that are currently visible on the screen are loaded initially. As the user scrolls down the page, the other images that need to be displayed on the screen are loaded. This approach prevents sending a large number of requests to the server at once and reduces server resource consumption when the user does not need to fully browse the page.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Lazy Loading Images</title>
    <style type="text/css">
        .imgUnitContainer{
            height: 300px; /* Fixed height */
            width: 500px; /* Fixed width */
            overflow: hidden; /* Hide images that exceed container */
            border: 1px solid #eee; /* Border */
            margin: 10px; /* Margin */
            display: flex; /* Flex layout, mainly to center the image */
            align-items: center; /* Vertical center */
            justify-content: center; /* Horizontal center */
        }
    </style>
</head>
<body>
    <div id="container"></div> <!-- Image container -->
</body>
    <script type="text/javascript">
        var imgNodeList = []; // References to all lazy loading images
        (function(){ // Initialization
            var imgUrlArr = [ // All image links to be loaded
                "http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg",
                "http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg",
                "http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg",
                "http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg",
                "http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg",
                "http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg",
                "http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg",
                "http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg",
                "http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg",
                "http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg",
                "http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg",
                "http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg",
            ];
            var innerContainer = document.createElement("div"); // Minimize DOM operations, all images are first loaded into this node and then mounted to the image container
            imgUrlArr.forEach(v => { // Iterate through image references
                var imgUnitContainer = document.createElement("div"); // Outer div for the image, mainly for uniform image size
                imgUnitContainer.className = "imgUnitContainer"; // Set class
                var img = new Image(); // Create a new img node
                img.src = "https://cdn.jsdelivr.net/gh/sentsin/layui@15d7241/dist/css/modules/layer/default/loading-2.gif"; // Show loading
                img.setAttribute("data-src", v); // Store the actual URL to be loaded
                img.setAttribute("loaded","no"); // Store whether the image has been loaded
                imgNodeList.push(img); // Add the node reference to the array
                imgUnitContainer.appendChild(img); // Add img to the outer div
                innerContainer.appendChild(imgUnitContainer); // Add the outer div to the inner container
            })
            document.getElementById("container").appendChild(innerContainer); // Add the container node to the document at once
        })();
function lazyLoad() {
    var height = window.innerHeight; // Height of the visible area
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // Height of the scroll area
    imgNodeList.forEach(v => { // Iterate through the image nodes
        if (v.getAttribute("loaded") === "yes") return; // If already loaded, skip
        if ((height + scrollTop) > v.offsetTop) { // If already appeared on the screen
            v.setAttribute("loaded", "yes"); // Set as loaded to avoid duplicate loading
            var tmp = new Image(); // Create a cache image node for implicit loading
            tmp.src = v.getAttribute("data-src"); // Set the src of the cache node to start loading
            tmp.onload = function() { // Cache image load complete event
                v.src = v.getAttribute("data-src"); // Assign the real URL to the image node displayed in the document, the browser will directly read from the cache
            }
        }
    })
}

window.onscroll = function() { // Browser scroll event
    lazyLoad();
}

window.onload = function() { // Document load complete event
    lazyLoad();
}

</script>
</html>

Daily Question

https://github.com/WindrunnerMax/EveryDay