一文搞懂JavaScript如何实现图片懒加载

在一个网站中，有大量的图片需要加载。而有些图片是用户可能看不到或者需要滚动到特定位置才能看到的，这时候我们就可以使用图片懒加载的技术，只在需要加载图片的时候进行加载，提高了网站页面的性能。

什么是图片懒加载

图片懒加载是一种技术，就是在用户滑动页面的时候，再去加载需要显示的图片，而不是在用户打开页面的时候全部加载。

实现原理

实现图片懒加载主要基于以下两个原理：

1. 首先图片需要有一张默认的属性src；
2. 当图片进入可视区域时，需要将默认的src属性替换成真正的图片地址。

基于这两个原理，我们可以写出如下的图片懒加载代码：

function lazyLoad() {
    const images = document.querySelectorAll('img[data-src]');
    images.forEach((img) => {
        const visibility = img.getBoundingClientRect().top <= window.innerHeight;
        if (visibility) {
            img.setAttribute('src', img.getAttribute('data-src'));
            img.onload = () => {
                img.removeAttribute('data-src');
            }
        }
    });
}
window.addEventListener('scroll', lazyLoad);

上述代码通过getBoundingClientRect()方法，获取每一个需要懒加载的图片相对于视口的位置信息，当图片的位置信息进入可视区域之后，就会将图片的默认data-src属性替换成真实的图片地址，为了确保图片加载完全，还绑定了onload事件，当图片加载完成之后，移除data-src属性。

图片懒加载的优势

1. 提高了网页性能，减轻了服务器压力；
2. 加快页面加载速度，提高用户体验；
3. 减少了不必要的流量消耗。

示例1

<div id="container">
    <img src="default.jpg" data-src="real.jpg">
    <img src="default.jpg" data-src="real.jpg">
    <img src="default.jpg" data-src="real.jpg">
    <img src="default.jpg" data-src="real.jpg">
    <img src="default.jpg" data-src="real.jpg">
    <img src="default.jpg" data-src="real.jpg">
    <img src="default.jpg" data-src="real.jpg">
    <img src="default.jpg" data-src="real.jpg">
    <img src="default.jpg" data-src="real.jpg">
</div>
<script>
    function lazyLoad() {
        const images = document.querySelectorAll('img[data-src]');
        images.forEach((img) => {
            const visibility = img.getBoundingClientRect().top <= window.innerHeight;
            if (visibility) {
                img.setAttribute('src', img.getAttribute('data-src'));
                img.onload = () => {
                    img.removeAttribute('data-src');
                }
            }
        });
    }
    window.addEventListener('scroll', lazyLoad);
</script>

以上代码实现了最基础的图片懒加载功能，在图片进入可视区域时才会进行加载，提高了页面性能。

示例2

<div id="container">
    <img src="default.jpg" data-src="real1.jpg">
    <img src="default.jpg" data-src="real2.jpg">
    <img src="default.jpg" data-src="real3.jpg">
    <img src="default.jpg" data-src="real4.jpg">
    <img src="default.jpg" data-src="real5.jpg">
    <img src="default.jpg" data-src="real6.jpg">
    <img src="default.jpg" data-src="real7.jpg">
    <img src="default.jpg" data-src="real8.jpg">
    <img src="default.jpg" data-src="real9.jpg">
</div>
<script>
    function lazyLoad() {
        const images = document.querySelectorAll('img[data-src]');
        images.forEach((img) => {
            const visibility = img.getBoundingClientRect().top <= window.innerHeight;
            if (visibility) {
                img.setAttribute('src', img.getAttribute('data-src'));
                img.onload = () => {
                    img.removeAttribute('data-src');
                }
            }
        });
    }
    window.addEventListener('scroll', lazyLoad, { passive: true });
</script>

在这个示例中，我们给addEventListener函数加了一个{ passive: true }的选项。这个选项表示这个事件处理函数不会调用preventDefault方法，这样可以避免一些不必要的性能问题。

总结

通过上面的示例，我们熟悉了图片懒加载的原理以及实现方法，如果我们在页面中存在大量的图片，使用图片懒加载可以更好的提升页面性能，也可以优化用户体验，提高页面的可用性。