延迟加载图片

简介

    为了提升用户体验，优化首页加载速度，我们经常会使用这样的策略：

• 延迟加载图片
• 减少网络请求
• 本地缓存
• 合并压缩js，css
• 使用CDN加速，等

下边就简单介绍一下延迟加载图片。

延迟加载图片

            //函数节流
            /**
             * 函数节流
             * @fn {Function} 延迟执行函数
             * @interval {Number} 延迟多久执行,默认值500毫秒
             * 
             * */
            var throttle=function(fn,interval){
                var _fn=fn || function(){},//保存需要延迟执行函数的引用
                timer,//定时器
                firstTime=true;//是否是第一次调用
                return function(){
                    var args=arguments,
                    that=this;
                    if(firstTime){//如果第一次执行不需要延迟
                        _fn.apply(that,args);
                        return firstTime=false;
                    }
                    if(timer){//如果定时器还在说明上一次执行还没结束
                        return false;
                    }
                    timer=setTimeout(function(){//延迟一段时间执行
                        clearTimeout(timer);
                        timer=null;
                        _fn.apply(that,args);
                    },interval || 500);
                }
            }
            
            $(function(){
                
                ;(function lazymag(){
                    var image_list=$(".image"),
                    win_height=window.innerHeight;
                    /**
                     * 绑定窗口改变大小事件
                     * */
                    window.onresize=throttle(function(){
                        //console.log("resize");
                        lazyimage(image_list,win_height);
                    },200)
                    /**
                     * 绑定滚动事件
                     * */
                    window.onscroll=throttle(function(){
                        //console.log("scroll");
                        lazyimage(image_list,win_height);
                    },200);
                    lazyimage(image_list,win_height);

                    /**
                     * 延迟加载图片
                     * @imagelist {Arry} jq对象img列表
                     * @win_height {Number} window窗体高度
                     * */
                    function lazyimage(imagelist,win_height){
                        var listlength=imagelist.length;
                        for(var i=0;i<listlength;i++){
                            if(win_height+document.querySelector("body").scrollTop>imagelist.eq(i).offset().top){
                                      if(!imagelist.eq(i).attr("src"))
                                      imagelist.eq(i).attr("src",imagelist.eq(i).attr("lazysrc"));
                                   }
                        }
                    }
                })();
            })

原理介绍：

首页是把所有图片src去掉，这样以来就会被加载

其次当页面滚动到图片所在位置时，设置src属性。

或者当窗体改变大小时，触发设置src属性

  获取window窗体高度，获取滚动条卷起的高度。他们两个值相加与当前进入可视范围内的图片到浏览器左上角的高度对比。

查看demo  查看demo 

总结

延迟加载图片用到的地方还是很多的。主要方法就是把所有非首屏的图片不加载。滚动到图片位置在加载。