实现图片懒加载

图片懒加载

原理:初始时给页面上的图片的src设置为空值或者javascript:;,给图片创建一个data-url属性,并将图片正确的url赋值给data-url属性,当图片到达浏览器视窗时,将data-url的值赋值给src属性,这样就达到了懒加载的目的;

实现懒加载前需要注意:

• 给html标签(当然其中就包括img)设置data-*属性,这个属性会被储存在dom的dataset属性中,它的属性名就是*(例如我给img标签设置data-url属性,那么可以在img元素内的dataset属性中找到名为url的属性)

  

• 需要获取图片对于浏览器视窗的偏移距离(使用getBoundingClientRectAPI),只有当图片在视窗范围之内,才加载图片

• 对于已经加载的图片,应该将其data-url属性移除，避免再次加载

• 应该使用节流函数对懒加载节流,防止过于频繁的调用懒加载函数,造成资源浪费

---

ok 现在来实现懒加载

<div class="wrap">

</div>

    let wrap = document.getElementsByClassName('wrap')[0];//获取wrap元素
    let viewHeight = document.documentElement.clientHeight;//获取可视区高度

    for (let i = 0; i < 100; i++) {
        
        let img = document.createElement('img');
        img.setAttribute('src','javascript:;');
        img.setAttribute('data-url','../img/naruto.jpeg');
        img.style.width = 200 + 'px';
        img.style.height = 200 + 'px';

        wrap.appendChild(img);
    }

    function throttle(fn,delay){//节流函数

        let flag = true;
        
        return function(){

            if(!flag) return;
            flag = false;
            const args = arguments;

            setTimeout(() => {
                fn.apply(this,args)
                flag = true;
            }, delay);

        }

    }

    function lazyLoad(){
        let eles = document.querySelectorAll(" img[data-url] ");
        console.log("else",eles);
        eles.forEach((item,index) => {

            if(item.dataset.url === '') return //如果已经加载过了,不再重新加载
            let rect = item.getBoundingClientRect()//获取当前图片在浏览器视窗中的位置

            if(rect.bottom >=0 && rect.top < viewHeight){

                item.src = item.dataset.url;
                item.removeAttribute('data-url')

            }

        })
    }
    lazyLoad();//初始时执行一次函数

    window.addEventListener('scroll',throttle(lazyLoad,100))

最终效果：实际应用中应该将节流函数的延时调小，我这里为了方便看出效果故意将延时设置成了0.5s