javascript实现图片延迟加载方法汇总(三种方法)

以下是详细的Markdown格式文本，包含了“JavaScript实现图片延迟加载方法汇总(三种方法)”这个主题的完整攻略:

JavaScript实现图片延迟加载方法汇总(三种方法)

在网页中长时间加载大量图片可能成为页面加载速度缓慢的主要原因。一种解决方案是通过延迟加载，只有当图片即将出现在用户的视野范围内时才开始加载。在下面的文本中我们将分享三个可以在网站上实现图片延迟加载的JavaScript方法。

方法一: 函数实现

第一个方法使用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>

我们仅展示了其中一个jQuery插件，但我们可以使用同等有效的其他插件。注意，使用插件需要引入其JS库。

在以上的三种方法中，你可以根据你的实际情况选择最适合你的方法。