原生js实现网页图片懒加载

平时在做企业官网时经常会遇到图片过多，加载过慢的问题，今天向同事请教之后，集中解决了一下，使用懒加载的方式加载图片，大大减少了网页加载时间，现在将具体的代码分享出来给大家参考，如果有什么错误的地方欢迎留言指正（ps：html代码只为展示用，并不涉及具体的页面布局，如需使用该html，请自行添加css）

 

html

        <ul>
                <li>
                    <a href="">
    
                        <div>

                             <!-- 下面这句img才是关键 -->

                            <img class="lazy_img" data-src="图片路径">
                        </div>
                        <div>产品名称</div>
                    </a>
                </li>
        </ul>

 

js（建议放在最底部或项目公共块尾部）

<script>

    //图片懒加载(使用时需在img标签的src前面加data-，并为该img加类名lazy_img)
    const lazyImgList = document.getElementsByClassName('lazy_img');

    for (x of lazyImgList) {

        console.log(x);
        const observer = new IntersectionObserver((changes) => {

            changes.forEach(change => {
                if (change.isIntersecting) {
                    const img = change.target;
                    // console.log();
                    img.src = img.getAttribute('data-src');
                    observer.unobserve(img);
                }
            });
        })
        observer.observe(x);

    }


</script>