How it works: When the height of the image in the window < viewport height + rolled out head, the drop down will show the HTML part of the image

<body style="height:1900px">
    <h3>Please pull down</h3>
    <img
        src="default.jpg"
        data-src="1.jpg"
        style="position: absolute; top: 1200px; "
    />
</body>
Copy the code

Js part

//1. Function definition
let img = document.getElementsByTagName("img");
let num = imh.length;
let count =0;// count from the first image
function lazyload() {
    let viewHeight = document.documentElement.clientHeight // Viewport height
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop  // The wrapped head
    for(leti =count; i<num ; i++){if(img[i].scrollTop < viewHeight + scrollTop){
            if(img[i].getAttribute("src")! = ="default.jpg")continue// If the load is complete, there is no need to go through the following process
            img[i].src=img[i].getAttribute("data-src")
            count++
        }
    }
}
/ / 2. Call
lazyload()
window.addEventListener("scroll",lazyload)
Copy the code