原生js实现图片懒加载

html代码

   <img class="lazay" data-src="`+ element.picture + `"></div>

js代码

   var server = new IntersectionObserver(callback)
    // 图片懒加载
    function lazay() { 
        let lazay = document.querySelectorAll(".lazay") //获取图片节点
       
        lazay.forEach(res => {
            server.observe(res) //循环遍历，监听每一张图片
        })
    }
    function callback(res){
        res.forEach(item => { //循环遍历，监听返回值
            if (item.isIntersecting) {
                let img = item.target //获取当前节点
                let data_src = img.getAttribute("data-src")
                img.setAttribute('src', data_src)
                server.unobserve(img)  //执行完后结束当前监听
            }
        })
    }