1、 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html, body, div {
            margin: 0;
            padding: 0;
        }
        img {
            display: block;
            margin-bottom: 50px;
            height: 200px;
        }
    </style>
</head>
<body>
    <img src="images/default.jpg" data-src="images/1.jpg">
    <img src="images/default.jpg" data-src="images/2.jpg">
    <img src="images/default.jpg" data-src="images/3.jpg">
    <img src="images/default.jpg" data-src="images/4.jpg">
    <img src="images/default.jpg" data-src="images/5.jpg">
    <img src="images/default.jpg" data-src="images/6.jpg">
    <img src="images/default.jpg" data-src="images/7.jpg">
    <img src="images/default.jpg" data-src="images/8.jpg">
    <img src="images/default.jpg" data-src="images/9.jpg">
    <img src="images/default.jpg" data-src="images/10.jpg">
    <img src="images/default.jpg" data-src="images/11.jpg">
    <img src="images/default.jpg" data-src="images/12.jpg">
    <img src="images/default.jpg" data-src="images/13.jpg">
    <img src="images/default.jpg" data-src="images/14.jpg">
    <img src="images/default.jpg" data-src="images/15.jpg">
    <img src="images/default.jpg" data-src="images/16.jpg">
    <img src="images/default.jpg" data-src="images/17.jpg">
    <img src="images/default.jpg" data-src="images/18.jpg">
    <img src="images/default.jpg" data-src="images/19.jpg">
    <img src="images/default.jpg" data-src="images/20.jpg">
    <img src="images/default.jpg" data-src="images/21.jpg">
    <img src="images/default.jpg" data-src="images/22.jpg">
    <img src="images/default.jpg" data-src="images/23.jpg">
    <img src="images/default.jpg" data-src="images/24.jpg">
</body>
</html>

2、Js

// 获取元素文档坐标
function _getDocPos(ele) {
    let x = 0,
        y = 0;
    while(ele != null) {
        x += ele.offsetLeft
        y += ele.offsetTop
        ele = ele.offsetParent
    }
    return {x, y}
}

//节流函数
... 参考本博客下面的(throttle && debounce 文章)

//方法一:
function lazyload() {
    var images = document.getElementsByTagName('img');
    var len    = images.length;
    var n      = 0;      //存储图片加载到的位置，避免每次都从第一张图片开始遍历       
    return function() {
        var seeHeight = document.documentElement.clientHeight;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        for(var i = n; i < len; i++) {
            if(_getDocPos(images[i]).y < seeHeight + scrollTop) { //方法二: 当图片的文档坐标小于（视口高度 + 滚动距离） 
                if(images[i].getAttribute('src') === 'images/default.jpg') {
                    images[i].src = images[i].getAttribute('data-src');
                }
                n = n + 1;
            }
        }
    }
}

//方法二:
function lazyload() {
    var images = document.getElementsByTagName('img');
    var len    = images.length;
    var n      = 0;      //存储图片加载到的位置，避免每次都从第一张图片开始遍历       
    return function() {
        var seeHeight = document.documentElement.clientHeight;
        for(var i = n; i < len; i++) {
            if(images[i].getBoundingClientRect().top < seeHeight) { //方法二: 当图片的视口top出现在视口中
                if(images[i].getAttribute('src') === 'images/default.jpg') {
                    images[i].src = images[i].getAttribute('data-src');
                }
                n = n + 1; 
            }
        }
    }
}

//测试
var loadImages = lazyload();
loadImages(); //初始化首页的页面图片
window.addEventListener('scroll', _throttle(loadImages, 1000), false);