图片懒加载及资源节流代码教程

图片懒加载及资源节流代码教程

//懒加载
    //保存图片路径
    // 给待加载图片一张默认图
    //使用data-src属性保存图片的真正地址
    //监听页面scroll事件
    // 手机当前进入页面的图片元素
    // 给src赋值真正地址
    //已加载的给加标记
    //函数节流，滚动性能提升


    //生成图片节点
    function genLazyImg(){
        var str = '';
        for(var i = 1 ;i < 11;i++){
            var name = 'img/scr'+i+'.jpg';
            var img = '<li class="item"><img data-src="'+name+'"' +
                ' src="img/zh.jpg" /></li>';
            str+=img;
        }

        return str;
    }


    //加载窗口中的图片
    function loadImg(){
        //这些变量可以外提
        var winHeight = $(window).height();
        var imgItems = $('ul img');
        imgItems.each(function(index,img){
            var $img = $(img);
            //判断是否在屏幕可视区
            var top = img.getBoundingClientRect().top;
            if(top <= winHeight){
                if($img.data('load') == 1)return;
                $img.attr('src',$img.data('src'));
                $img.data('load',1)
            }
        })
    }

    var imgs = genLazyImg();
    $('ul').html(imgs);

//
//    $(window).scroll(function () {
//        console.log('scroll')
//        loadImg()
//    })


    //对scroll事件函数节流 新能优化
    //经常用的方法为以下这个方法throttle，也可以了解debounce
    //来降低函数的调用频率
    function throttle(fn,delay,scope){
        //时间间隔250s
        delay || (delay = 250);
        var last,
            deferTimer;
        return function () {
            var context = scope || this ;
            var now = +new Date();
            args = arguments;
            done_fn = function (immediate) {
                last = immediate ? now : +new Date();
                deferTimer = null ;
                fn.apply(context,args);
            };

            if(last === undefined || (now - last) >= delay){
                clearTimeout(deferTimer);
                return done_fn(true);
            }

            //deferTimer !===null 就会组织一次动作结束后，新的一轮动作在结束时，应该会有一次动作的行为
            deferTimer === null && (deferTimer = setTimeout(done_fn,delay))
        }

    }


    var lazyLoad = throttle(function () {
        console.log('scroll');
        loadImg()
    })

    $(window).scroll(function () {
        lazyLoad()
    })

函数节流（throttle）：是让一个函数无法在很短的时间间隔内连续调用，当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的调用。

函数去抖（debounce）：让一个函数在一定间隔内没有被调用时，才开始执行被调用方法。

两个方法都是用来提升前端性能，减轻浏览器压力。