方法一: 函数实现

第一个方法使用JavaScript编写基本的函数，利用元素节点的scrollTop和offsetTop属性实现图片延迟加载。当元素节点的scrollTop值大于等于图片距离顶部的offsetTop值的时候图片开始加载。

function lazyLoad() {
    const images = document.getElementsByTagName("img");
    const len = images.length;
    const n = 0;
    return function() {
        const seeHeight = window.innerHeight;
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        for (let i = n; i < len; i++) {
            if (images[i].offsetTop < seeHeight + scrollTop) {
                if (images[i].getAttribute("src") === "default.jpg") {
                    images[i].src = images[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }
}
document.addEventListener('scroll', lazyLoad());

方法二: 使用IntersectionObserver

IntersectionObserver API 是浏览器提供的一种观察者模式，它可以在目标节点进入或离开视图的情况下异步执行回调。简而言之，我们可以使用IntersectionObserver实现图片的延迟加载，只有当图片出现在用户的视野范围内时再进行加载。

function lazyLoad() {
    let images = document.querySelectorAll('img[data-src]');
    if ('IntersectionObserver' in window) {
        let observer = new IntersectionObserver(function (entries, observer) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    observer.unobserve(lazyImage);
                }
            })
        }, 
        {
          rootMargin: '300px 0px',
          threshold: 0.1
        });
        images.forEach(function (lazyImage) {
            observer.observe(lazyImage);
        });
    }  
}
document.addEventListener('DOMContentLoaded', lazyLoad);

方法三: 使用jQuery插件

最后一个方法是使用jQuery插件，这些插件由自己提供的API实现图片延迟加载。我们可以使用任何一个为jQuery编写的现成的图像延迟加载插件，如Lazy Load、Unveil.js等等。

<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
<script>
$(function () {
    $("img").lazyload({
        threshold: 200,
        effect: "fadeIn"
    });
});
</script>