图片懒加载

实现图片懒加载先了解几个属性

• offsetWidth/offsetHeight

对象的可见宽度

• clientWidth/clientHeight

内容的可见宽度

• scrollWidth/scrollHeight

元素完整的高度和宽度，overflow:hidden的部分也计算在内。

• offsetLeft/offsetTop

当前元素距浏览器边界的偏移量，以像素为单位。

• clientTop/clientLeft

这个属性测试下来的结果就是border。

• scrollLeft/scrollTop

设置或返回已经滚动到元素的左边界或上边界的像素数。

实现代码

 //显示器高度 window.innerHeight
    //图片到视窗上的距离 getBoundingClientRect().top
    let imgs=document.querySelectorAll('img')
    console.log(imgs);

    window.addEventListener('scroll',(e)=>{
        imgs.forEach(v=>{
            const imgtop=v.getBoundingClientRect().top
            console.log(imgtop);
            if(imgtop<window.innerHeight)
            {
              
                let data_src=v.getAttribute('data-src')
                 v.setAttribute('src',data_src)
            }
            console.log('触发');
        })
    })

HTML

<img  data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb1-q.mafengwo.net%2Fs7%2FM00%2F2E%2F37%2FwKgB6lSuHraAYMNtAAXF8ovILuk683.png&refer=http%3A%2F%2Fb1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627892666&t=953e6a19584b6772c33a1b84604fa63d">

感觉上面这样触发太频繁 加个节流吧

//节流写法
    window.onscroll = throttle(getscroll,200)
    



    //主体函数
    function getscroll() {
  
        let imgs = document.querySelectorAll('img')

        imgs.forEach(v=>{
            const imgtop=v.getBoundingClientRect().top
            console.log(imgtop);
            if(imgtop<window.innerHeight)
            {

                let data_src=v.getAttribute('data-src')
                 v.setAttribute('src',data_src)
            }
          
        })
    }

    //节流函数 过一段时间才触发
    function throttle(fn, delay) {
        let timer = true
        return function () {
            if (!timer) {
                return false
            }
  
            timer=false
            setTimeout(() => {
            fn()
            console.log('我是节流');
            timer = true;
        }, delay)

        }
    }

不节流效果

节流后的效果 200ms间隔