图片懒加载

一、定义

图片懒加载是对于一个很长的页面，优先加载可视区域的内容，其他部分等进入可视区域时再加载。相对于传统的图片加载方式，懒加载可以减少初始页面的加载时间，提高网站的响应速度。尤其对于移动设备和网络条件较差的用户，懒加载可以显著地提高用户的体验。

二、原理

传统的图片加载方式是在网页的 HTML 代码中使用 <img> 标签引用图片，当浏览器解析到这个标签时，就会开始下载图片。而图片懒加载则是将图片的 URL 存储在另一个属性（例如 data-src）中，而不是直接使用 <img> 标签。当用户滚动页面时，JavaScript 会检测图片是否在可视区域内，如果在，则将 URL 赋值给 <img> 标签的 src 属性，浏览器就会开始下载图片。

三、实现方法

使用第三方库

目前市场上有很多成熟的图片懒加载库，例如：jQuery Lazy、Unveil.js、Lozad.js 等。这些库都提供了简单易用的 API，只需要引入库并按照文档说明进行调用即可实现懒加载。

使用 IntersectionObserver API

IntersectionObserver API 是现代浏览器提供的一种监听元素是否可见的方法。使用这个 API 可以很方便地实现图片懒加载，只需要监听图片元素是否进入了可见区域即可。这种方法的好处是可以减少 JavaScript 的运行时间和内存占用。

<script>
        var imgs = document.getElementsByTagName('img')
        let io = new IntersectionObserver((entires) =>{
            entires.forEach(item => {
                let oImg = item.target
                if (item.intersectionRatio > 0 && item.intersectionRatio <= 1) {
                    oImg.setAttribute('src', oImg.getAttribute('data-url'))
                } 
            })
        })
        Array.from(imgs).forEach(element => {
            io.observe(element) 
        });
    </script>

自己编写 JavaScript

1.设置img标签

<img src="" data-src="./01.jpg" alt="">

2.js代码

<script>
        window.onload = function () {
            var imgs = document.getElementsByTagName("img")
            change(imgs)
            window.addEventListener("scroll", function () {
                change(imgs)
            })
        }
        function change(imgs) {
            for (var i = 0; i < imgs.length; i++) {
                var imgoffTop = imgs[i].offsetTop
                var viewTop = window.innerHeight
                var gun = document.documentElement.scrollTop
                if (imgoffTop - gun +200<= viewTop) {
                    imgs[i].src = imgs[i].dataset.src
                }
            }
        }
    </script>

四、结论

全部加载的话会影响用户体验，图片懒加载可以提高网站的加载速度和用户体验。但同时也需要注意一些常见问题和解决方案，保证图片的加载效果和用户体验。

懒加载优点：页面加载速度快，减轻服务器压力，节约流量，用户体验好。