图片懒加载

图片懒加载

定义：就是这张图片很懒，喜欢临时抱佛脚，都到了出现在屏幕视线范围内了才加载。不过懒人有懒福，这样可以在那种有大量图片需要展示的网站上优化性能，减轻浏览器压力，毕竟你要浏览器一次加载一两百张图片也很累

原理： 每个图片标签先把图片地址存储在一个临时属性上，用浏览器的onscroll事件监听每个图片元素，到了屏幕可视区域再赋予地址到src上。

代码实现：

html代码 省略
js代码
            const imgs = document.querySelectorAll('img');
            let begin = 0;
            function lazyload(){
                for (let index = begin; index < imgs.length; index++) {
                    const img = imgs[index];
                    if(img.offsetTop < document.documentElement.clientHeight + document.documentElement.scrollTop){
                        console.log("scroll"+index+"到了")
                        begin = index; //不去遍历已经加载了得图片
                        img.src = img.getAttribute("imgPath")
                    }
                }
            }
            lazyload() //渲染首屏，先执行一次
             window.onscroll = lazyload;

以上代码缺点，执行太多了，每次监听到滚轮事件都要去循环

添加个节流函数：，如下：

//节流函数
            function throttle(lazyTime, Fuc){
                var lastTime = null //记录上次时间
                return function(){
                    var currentTime = new Date().getTime();
                    if(!lastTime){ //初始化时间
                        lastTime = currentTime;
                    }
                    if(lastTime + lazyTime < currentTime){
                        Fuc();
                        lastTime = currentTime;
                    }
                }
            }
            window.onscroll = throttle(50, lazyload) //事件回调是个闭包

测试基本可行，没在项目中跑过，可能待优化的地方还比较多，原理是这样的

建议自己多自己写下，纸上得来终觉浅，绝知此事要躬行

---

说到了节流，又要说下防抖函数，现学现卖，以前我不知道二者的区别，但是在项目中已经不知不觉用过了。

节流函数：不管事件的触发频率有多高，只会间隔设定的时间执行目标函数，如模糊搜索，上面的懒加载，规定时间内必执行

防抖函数: 当触发频率高于设定的值得时候，不执行。低于触发频率再执行。
解释起来很模糊。
实际运用中，如：需要后台验证的用户名注册输入框，当用户频繁输入的时候不用验证，当用户有一个停顿的时候，去后台验证是否重名，这样优化了交互，减轻了服务器压力

上代码：

html
        
注册
        

        

js
            function debounce(Fuc, time){ //防抖
                let timer = null
                return function () {
                    clearTimeout(timer); 
//清除定时器，如果触发时间超过设定时间，则定时器中的代码不能执行
                    timer = setTimeout(() => {
                        Fuc()
                    }, time); //重新赋值定时器
                }
            }
            function test(){
                document.querySelector('#text').innerHTML = new Date().getTime();
            }
            document.querySelector('#input').addEventListener('input', debounce(test, 1000))

原理很简单，利用闭包操作同一个定时器的原理，和定时器的异步性，触发时间短于设定时间时，去清除还没有执行的定时器，然后重新定义定时器。很巧妙的代码

效果图：
输入前：

输入前.png

频繁输入过程中：

image.png

输入停止1s后：

1s后.png