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

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

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

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

<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>