SOURCE

var imgs = document.querySelectorAll('img');

// offsetTop是元素与offsetParent的距离
function getTop(e) {
    var T = e.offsetTop;
    return T;
}

function lazyLoad(imgs) {
    var H = document.documentElement.clientHeight; // 获取可视区域高度
    var S = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条滚动高度
    for (var i = 0; i < imgs.length; i++) {
        if (H + S > getTop(imgs[i])) {
            imgs[i].src = imgs[i].getAttribute('data-src');
        }
    }
}

let timer = null
// onscroll() 在滚动条滚动的时候触发
// 节流，防止onscroll频繁触发
window.onload = window.onscroll = function () {
    if (timer) {
        return
    }
    timer = setTimeout(() => {
        lazyLoad(imgs);
        timer = null
    }, 1000)
}

<div class="img_list">
    <img data-src="https://gitee.com/caldey/BlogImage/raw/master/img/avatar.jpg" alt="">
    <img data-src="https://gitee.com/caldey/BlogImage/raw/master/img/owl-50267_1920.jpg" alt="">
    <img data-src="https://gitee.com/caldey/BlogImage/raw/master/img/lion-5889712_1920.jpg" alt="">
    <img data-src="https://gitee.com/caldey/BlogImage/raw/master/img/lemur-5442925_1920.jpg" alt="">
    <img data-src="https://gitee.com/caldey/BlogImage/raw/master/img/heron-5917731_1920.jpg" alt="">
    <img data-src="https://gitee.com/caldey/BlogImage/raw/master/img/cat-694730_1920.jpg" alt="">
</div>

div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
img {
    display: block;
    width: 500px;
    height: 300px;
    margin-bottom: 20px;
}