懒加载封装实现

2018-5-24 Mechau 前端技术资源

1.什么是懒加载?
         当访问一个页面的时候,先把img元素背景图片路径替换成一张替代图片的路径(这样就只需请求一次,占位图),将图片的真实路径存储在img自定义属性中,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。
2.为什么要用懒加载?
       很多页面,内容很丰富,页面很长,图片较多。比如说各种商城页面。这些页面图片数量多,而且比较大,少说百来K,多则上兆。要是页面载入就一次性加载完毕,提高首屏加载速度,可以减轻服务器压力,节约流量,用户体验好。
3.懒加载实现封装?

    lazyLoad由四个函数组成,init(初始化函数),checkShow(判断图片是否加载),shouldShow(将要展示的图片),showImg(展示图片)。

(1)初始化函数(init)  由于滚动事件太消耗性能,所以用定时器替换,不是滚动就触发,而是滚动后200毫秒后触发。

                var timer;
                function init(){
                    $(window).on("scroll",function(){
                        if(timer){
                            clearTimeout(timer);
                        }
                        timer = setTimeout(function(){
                            checkShow();  //
                        },200);
                    });
                }

(2)判断”图片是否加载“(checkshow)函数,如果图片有isload属性,就说明图片已经加载过了,直接return。如果图片没有isload属性,进入将要展示图片shouldshow函数

                function checkShow(){
                    $lazyLoad.each(function(){
                        $cur = $(this);
                        if($cur.attr('isLoaded')){
                            return;
                        }
                        if(shouldShow($cur)){
                            showImg($cur);
                        }
                    });
                }

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

               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(真正图片的地址)。

                function showImg ($node){
                    $node.find("img").attr("src",$node.data("src"));
                    $node.attr("isLoaded",true);
                }

(5)函数返回一个对象

              return {
                        init : init
           }

      这样就实现懒加载封装了!

标签: javascript


Powered by emlog 京ICP备12006971号-1 sitemap