14
2013
11

自己写jquery.lazyloading图片延迟加载插件,通用

jQuery.lazyloading.js的作用/加载过程/原理/设计思路:
1、刚加载页面时只加载html,不加载图片,图片的src为空,把真实的图片路径放到data-original属性中,页面加载速度变快;
2、在页面加载完成之后,js初始化,把有data-original属性的图片再加一个<div></div>在外面,再创建一个隐藏的<img />标签,并且根据原图片的大小和位置计算loading图片的位置,把loading图片显示在中间;
3、判断window的scroll事件(滚动条变化),判断图片在不在可视区域内,如果在可视区域内,那么执行第4步,否则什么也不做。
4、判断图片的src与data-original是不是相同,如果不相同(说明还没有加载),执行第5步,否则什么也不做。
5、把图片的data-original赋值给隐藏的<img />标签的src,当隐藏的图片完全加载好之后(完成后会执行它的.load()事件),再把隐藏图片的src赋值给原图片的src(原因:保证loading图片消失后目标图片立即显示,如果一开始把data-original赋值给图片的src,那么还没加载完就会显示图片,网页中图片是一截一截显示的,非常难看).

«1»