一、前言
当一个页面中请求的图片过多，而且图片太大，页面访问的速度是非常慢的，对用户的体验非常不友好；使用图片懒加载，可以减轻服务器的压力，增加页面的访问量，这里主要是总结一下我自己写的图片懒加载组件jQuery.imgLazyLoad；使用该组件应在img标签中设置一个imglazyload-src属性，存放图片地址。
二、应用实例demo
/**
* component: imgLazyLoad 2013/12/12 华子yjh
* invoking: jQuery.imgLazyLoad(options)
*
// 配置对象
options = {
container: 'body', // 外围容器，默认body
tabItemSelector: '', // Tab切换面板选择器
carouselItemSelector: '', // 图片轮播面板选择器
attrName: 'imglazyload-src' // 图片地址属性
diff: 300 // 预加载像素
}
*
*/
图片轮播懒加载：http://miiee.taobao.com
Tab切换图片懒加载：http://miiee.taobao.com/main.htm
浏览器滚动图片懒加载：http://miiee.taobao.com/themes/theme_151.htm
三、设计思路
1、处理浏览器下拉滚动
比较 $(window).scrollTop + $(window).height() 与 img.offset().top 的值，当图片在浏览器窗口中，开始加载图片
2、处理Tab切换 与 图片轮播
在处理Tab切换 与 图片轮播，组件提供了一个用于事件处理的函数 handleImgLoad，参数idx：
该参数对于图片轮播，是作为下一轮轮播面板的索引，将下一轮轮播面板中的所有图片预加载
对于Tab切换，则是作为tab项的索引，加载当前显示tab项中的所有图片
3、选择器处理
3.1、滚动下拉选择器的处理
在 配置对象中有一个attrName，是保持图片地址的一个属性 选择器为：img[config.attrName]；
其次图片是显示的，如果隐藏，则不加载图片， 选择器为：img[config.attrName]:visible；
再次如果图片已加载，为其加上一个img-loaded的className，为了过滤已加载过的图片，选择器为：img[config.attrName]:visible:not(.img-loaded)；
最后如果一个页面使用多次组件，第一次使用时，当配置对象container为body子元素，第二次应该过滤前一次container匹配元素中的图片，
依次类推，选择器为：img[config.attrName]:visible:not(.img-loaded):not(jQuery.imgLazyLoad.selectorCache)
3.2、Tab切换、图片轮播选择器的处理
在 配置对象中有tabItemSelector 或 carouselItemSelector ，结合事件处理函数的参数idx，获取当前Tab项或下一轮轮播面板中的图片
选择器为：tabItemSelector:eq(idx) img 或 carouselItemSelector:eq(idx) img
如果idx === undefined，选择器为：tabItemSelector:visible img 或 carouselItemSelector:eq(0) img
我是根据我自己写的jQuery组件自行判断的
四、组件
滚动 懒加载
$.imgLazyLoad({ diff: 300 });
