首页 > 代码库 > 懒加载
懒加载
分步加载轮播图的时候,由于是滑动式,何时创建,复杂的时序,提前摆位,曾经困扰我好几天。
今天好友给我介绍了一个懒加载的方法:
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结构了!
懒加载
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。