懒加载

分步加载轮播图的时候，由于是滑动式，何时创建，复杂的时序，提前摆位，曾经困扰我好几天。

今天好友给我介绍了一个懒加载的方法：

var Lazy = function(){

        var load = function(){

            var imgs = $('img[data-lazyload]'),

                winY = WIN.height(),

                scrollY = WIN.scrollTop();



            imgs.each(function(index, img){

                img = $(img);



                var data = img.attr('data-lazyload'),

                    //src = img.attr('src'),

                    imgY = img.offset().top;



                if(/*!src && */data && imgY <= winY + scrollY){

                    img.attr('src', data).removeAttr('data-lazyload');

                }

            });

        };



        load();

        WIN.on({

            resize: load,

            scroll: load

        });

    };

可以看出这个是无限滚动，异步请求的时候用的。

其实轮播图也可以用，一次性写入dom元素，但不给他们真实的src属性，给个自定义的比如 data-lazyload，然后时序到了，再改回来，就实现了懒加载。

而不用动态添加和删除dom结构了！