首页 > 代码库 > 懒加载

懒加载

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

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

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 = http://www.mamicode.com/img.attr(data-lazyload),                    //src = http://www.mamicode.com/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结构了!

懒加载