A lot of pictures are lazy loaded on the Internet, but they are basically implemented by jQuery. I didn't explain the principle clearly, so I studied them

Many don't say, on the code, don't understand the proposal to see my last article< 1. Illustrate the wide and high attributes of browser and user equipment>

HTML part (image address is optional)

<div>
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
    <img data-src="1.jpg" src="0.gif" alt="">
</div>

Part JS

/*
First, the image address is stored in "data SRC"
     2.When the picture appears on the page, the address of "src" will be changed
Focus on whether the picture appears in the page
        1.Image height from top of page + screen height
        2.The height of the page from the top to be rolled up
*/
//Operable part(Pre use testing is recommended)
    var m = 500;  //Higher values load more on top
    var n = 0;  //Higher values load more

//selected img element
var imgs = document.getElementsByTagName("img");
//Determine the height of the browser
var win_h = window.innerHeight||document.documentElement.clientHeight;
//Replace pictures
function replace(num){
    //Not directly img Of"src"Be equal to"data-src",So get it first"data-src"Value,Then add to"src"
    imgs[num].setAttribute("src", imgs[num].getAttribute("data-src"));
}

//Judge the scroll position when the page is scrolling(Appears in the view window),Loading
window.onscroll = function(){
    //The height of the rolled up part of the page
    var scroll_top = window.pageYOffset;
    //Height of the image from the top of the page
    for (var i = 0; i < imgs.length; i++) {
        var c = imgs[i].offsetTop;
        //When the picture is just in the visible window,replace content
        if (c > (scroll_top - m) && c < (scroll_top + win_h - n)) {
            replace(i);
        }
    }
}
//Start page will load some pictures
window.onscroll();

Although it's verbose, the content is detailed. I hope it can help you

The final effect is as follows: