手写个图片懒加载和事件的节流与防抖

原创 JerryMark 教程 js 74阅读 2018-11-13 10:19:00 举报
前记

在一些图片量比较大的网站(比如电商网站首页,或者团购网站、小游戏首页等),如果我们尝试在用户打开页面的时候,就把所有的图片资源加载完毕,那么很可能会造成白屏、卡顿等现象。但是打开页面的瞬间,呈现给用户的只有屏幕的一部分(我们称之为首屏)。只要我们可以在页面打开的时候把首屏的图片资源加载出来就可以了。

      * 

可以看下一下这张图一目了然:

进入懒加载代码

//添加监听事件,页面初始化要执行一次

这个scroll 是个用户频繁触发的事件,对性能极大的影响。

可以看到console下输出的一堆log,所以我们还要优化下上面的代码,引入下面的防抖和节流

事件的节流(throttle)与防抖(debounce)

这两个概念

以闭包的形式存在,它们通过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息,最后用 setTimeout 来控制事件的触发频率。

节流(throttle)
    /**
     * 每当用户触发了一次 scroll 事件,我们就为这个触发操作开启计时器。一段时间内,后续所有的 scroll 事件都无法触发新的 scroll 回调。直到定时器的时间到了,第一次触发的 scroll 事件对应的回调才会执行,而这个时间段内触发的后续的 scroll 回调都不会执行
     * 说简单点就是:定时器时间内的第一次scroll有效,后面触发的scroll 都无效。
     * **/

//第一种我们使用时间戳来实现

//定时器版本

调用

            // window.addEventListener('scroll',throttle(function(){
            //     console.log('触发了滚动事件')
            // },1000),false);
            //再从浏览器看到 无论我怎么滚动,只有到规定时间才会触发

防抖 debounce

当持续触发事件时,debounce 会合并事件且不会去触发事件,当一定时间内没有触发再这个事件时,才真正去触发事件。

具体的html:

所以我们的图片懒加载可以这样使用:

 window.addEventListener('scroll',throttle(lazyLoad,1000),false);

最后附上:原文地址

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复