深入懒加载

1. return {  
2.     init : _init,  
3.     addCallBack : _addCallBack  
4. };  

1. var config = {  
2.     mod : ‘auto‘, //分为auto和manul  
3.     IMG_SRC_DATA : ‘img-lazyload‘,  
4.     AREA_DATA_CLS : ‘area-datalazyload‘  
5. };  

1. //自动模式  
2. datalazyload.init({  
3.     ‘mod‘ :auto  
4. });  
5.   
6. //手动模式  
7. datalazyload.init({  
8.     ‘mod‘ :manual,  
9.    ‘IMG_SRC_DATA‘  ： ‘data-src‘  
10. });  

1. /** 
2.  * @fileOverview 数据懒加载组件 
3.  * @require jQuery 
4.  */  
5.   
6. datalazyload = (function($){  
7.   
8.     var config = {  
9.         mod : ‘auto‘, //分为auto和manul  
10.         IMG_SRC_DATA : ‘img-lazyload‘,  
11.         AREA_DATA_CLS : ‘area-datalazyload‘  
12.     };  
13.       
14.       
15.     var IMG_SRC_DATA = ‘‘;  
16.     var AREA_DATA_CLS = ‘‘;  
17.       
18.     //用来存放需要懒加载的图片和数据块  
19.     var imgArr = [];  
20.     var areaArr = [];  
21.       
22.     //支持用户回调的事件类型  
23.     var eventType = ‘lazy‘;  
24.       
25.     /** 
26.      * 提供给外部的接口 
27.      * @param {Object} [userConfig] 用户自定义配置 
28.      * @private 
29.     */    
30.     function _init(userConfig) {  
31.         config = $.extend(config,userConfig);  
32.         console.log(config);  
33.         IMG_SRC_DATA = config.IMG_SRC_DATA;  
34.         AREA_DATA_CLS = config.AREA_DATA_CLS;  
35.         _filterItems();  
36.         _initEvent();  
37.     }  
38.       
39.     /** 
40.      * 处理需要懒加载的图片和数据块的入口 
41.      * @private 
42.     */    
43.     function _filterItems() {  
44.         _filterImgs();  
45.         _filterAreas();  
46.     }  
47.   
48.     /** 
49.      * 事件绑定 
50.      * @private 
51.     */        
52.     function _initEvent() {  
53.         $(window).scroll(_eventHandler);  
54.         $(window).resize(_eventHandler);  
55.         _eventHandler();  
56.     }  
57.   
58.     /** 
59.      * 处理需要懒加载的图片 
60.      * @private 
61.     */    
62.     function _filterImgs() {  
63.         if (config.mod === ‘auto‘) {   
64.             //自动模式  
65.             var $imgs = $("img");  
66.             $imgs.each(function() {  
67.                 imgArr.push(this);  
68.                 var $img = $(this);  
69.                 $img.targetY = _getTargetY($img[0]);//先计算出每个图片距离页面顶部的高度，避免在事件事件处理函数中进行大量重复计算  
70.                 var dataSrc = $img.attr(IMG_SRC_DATA);  
71.                 //对于已存在IMG_SRC_DATA的，可能其它实例处理过，我们直接跳过去  
72.                 if (!dataSrc) {  
73.                     $img.attr(IMG_SRC_DATA,$img.attr(‘src‘));  
74.                     $img.removeAttr(‘src‘);  
75.                 }  
76.             });  
77.         } else {  
78.             //手动模式下，已经在需要懒加载的IMG中设置了IMG_SRC_DATA属性，所以不作任何处理  
79.             var $imgs = $("img["+IMG_SRC_DATA+"]");  
80.             $imgs.each(function() {  
81.                 imgArr.push(this);  
82.                 var $img = $(this);  
83.                 $img.targetY = _getTargetY($img[0]);//先计算出每个图片距离页面顶部的高度，避免在事件事件处理函数中进行大量重复计算  
84.             });  
85.         }  
86.     }  
87.       
88.     /** 
89.      * 处理需要懒加载的数据块 
90.      * @private 
91.     */    
92.     function _filterAreas() {  
93.         var $areas = $("textarea[class=‘"+AREA_DATA_CLS+"‘]");  
94.         $areas.each(function() {  
95.             areaArr.push(this);  
96.             var $area = $(this);  
97.             $area.targetY = _getTargetY($area[0]);  
98.         });  
99.     }  
100.   
101.     /** 
102.      * window节点的scroll和resize的事件处理函数 
103.      * @private 
104.     */  
105.     function _eventHandler() {  
106.         $.each(imgArr,function(i,el){  
107.             if (el !== undefined) {  
108.                 var $img = $(el);  
109.                 if (_checkBounding($img)) {  
110.                     $img.attr(‘src‘,$img.attr(IMG_SRC_DATA));  
111.                     $img.trigger(eventType);  
112.                     $img.unbind(eventType);  
113.                     delete imgArr[i];  
114.                 }  
115.             }  
116.         });  
117.         $.each(areaArr,function(i,el){  
118.             if (el !== undefined) {  
119.                 var $area = $(el);  
120.                 if (_checkBounding($area)) {  
121.                     $area.hide();  
122.                     $area.removeClass(AREA_DATA_CLS);  
123.                     var $div = $("<div></div>");  
124.                     $div.insertBefore($area);  
125.                     $div.html($area.val());  
126.                     delete areaArr[i];  
127.                 }  
128.             }  
129.         });       
130.           
131.     }  
132.     /** 
133.      * 检查需要懒加载的节点是否进入可视区域 
134.      * @param {jQuery Object} [el] 
135.      * @private 
136.     */    
137.     function _checkBounding($el) {  
138.         var scrollY = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset || 0;//页面滚动条高度  
139.         var seeY = window.innerHeight || document.documentElement.clientHeight;//浏览器可视区域高度  
140.         if ($el.targetY) {  
141.             var targetY = $el.targetY;  
142.         } else {  
143.             var targetY = _getTargetY($el[0]);  
144.         }  
145.           
146.         //当目标节点进入可使区域  
147.         if (Math.abs(targetY - scrollY) < seeY) {  
148.             return true;  
149.         } else {  
150.             return false;  
151.         }  
152.     }   
153.       
154.     /** 
155.      * 获取目标节点距离页面顶部高度 
156.      * @param {HTML Element} [el] 
157.      * @private 
158.     */    
159.     function _getTargetY(el) {  
160.         var tp = el.offsetTop;  
161.         if (el.offsetParent) {  
162.             while (el = el.offsetParent) {  
163.                 tp += el.offsetTop;  
164.             }  
165.         }  
166.         return tp;  
167.     }  
168.       
169.     /** 
170.      * 特定元素即将出现时的回调函数 
171.      * @param {jQuery Obj} [$el]  
172.      * @param {Function} [func] 
173.      * @private 
174.     */        
175.     function _addCallBack($el,func) {  
176.         $el.bind(eventType,function(event) {  
177.             func.call($el,event);  
178.         });  
179.     }  
180.     return {  
181.         init : _init,  
182.         addCallBack : _addCallBack  
183.     };  
184.       
185. })(jQuery);  

转载来源：http://blog.csdn.net/huli870715/article/details/8126519