黑马程序员技术交流社区

标题: 【上海校区】懒加载封装实现 [打印本页]

---

作者: 懒，羊羊    时间: 2018-4-20 13:04
标题: 【上海校区】懒加载封装实现


1.什么是懒加载？
        当访问一个页面的时候，先把img元素背景图片路径替换成一张替代图片的路径（这样就只需请求一次，占位图），将图片的真实路径存储在img自定义属性中，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
2.为什么要用懒加载？
        很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕，提高首屏加载速度，可以减轻服务器压力，节约流量，用户体验好。
3.懒加载实现封装？ lazyLoad由四个函数组成，init(初始化函数)，checkShow（判断图片是否加载），shouldShow（将要展示的图片），showImg（展示图片）。
        1.初始化函数(init)  由于滚动事件太消耗性能，所以用定时器替换,不是滚动就触发,而是滚动后200毫秒后触发。        

[JavaScript] 纯文本查看 复制代码

var timer;

                function init(){

                    $(window).on("scroll",function(){

                        if(timer){

                            clearTimeout(timer);

                        }

                        timer = setTimeout(function(){

                            checkShow();  // 

                        },200);

                    });

                }

        2. 判断'图片是否加载'(checkShow) 函数,如果图片含有'isLoaded'属性，证明图片已经加载过了,直接return。
           如果图片没有'isLoaded'属性,进入 '将要展示图片'(shouldShow) 函数。
           

[JavaScript] 纯文本查看 复制代码

function checkShow(){

                    $lazyLoad.each(function(){

                        $cur = $(this);

                        if($cur.attr('isLoaded')){

                            return;

                        }

                        if(shouldShow($cur)){

                            showImg($cur);

                        }

                    });

                }

        3. 将要展示图片'(shouldShow)函数,获取屏幕可是高度,滚动高度,要展示的元素到文档的高度,
           如果元素到文档的高度小于屏幕的可视高度加上滚动高度,说明元素已经在可视区内,返回true
           否则返回false。
        

[JavaScript] 纯文本查看 复制代码

function shouldShow ($node){

                    var scrollH = $(window).scrollTop(),

                        windowH = $(window).height(),

                        top = $node.offset().top;

                    if(top < windowH + scrollH){

                        return true;

                    } else {

                        return false;

                    }

                }

        
        4. '展示图片'函数, 将元素的src替换为自定义属性data-src(真正的图片地址)。
        

[JavaScript] 纯文本查看 复制代码

function showImg ($node){

                    $node.find("img").attr("src",$node.data("src"));

                    $node.attr("isLoaded",true);

                }

        5. 函数返回一个对象。
        

[JavaScript] 纯文本查看 复制代码

return {

                        init : init

          }

      这样就实现懒加载封装啦！

        

---

作者: 不二晨    时间: 2018-7-16 12:05
奈斯

---

作者: 吴琼老师    时间: 2018-7-18 15:12

---

作者: 不二晨    时间: 2018-7-18 15:15
奈斯，优秀

---

作者: 不二晨    时间: 2018-7-20 11:05
优秀，奈斯

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2