深入懒加载

[javascript] view plain copy

懒加载（LazyLoad）一直是前端的优化方案之一。它的核心思想是：当用户想看页面某个区域时，再加载该区域的数据。这在一定程度上减轻了服务器端的压力，也加快了页面的呈现速度。

懒加载多用于图片，因为它属于流量的大头。最典型的懒加载实现方案是先将需要懒加载的图片的src隐藏掉，这样图片就不会下载，然后在图片需要呈现给用户时再加上src属性。

公司内部库的懒加载正是采用这种方案。它会遍历页面中所有的图片，将其src缓存起来后删除图片的src属性，当图片进入用户的可视区域后再为图片附加src属性。这种方案存在着以下不足：

① 在IE和FF下，懒加载的脚本运行时，有部分图片已经于服务器建立链接，这部分abort掉，再在滚动时延迟加载，反而增加了链接数。

② 在chrome下，由于webkit内核bug,导致无法abort掉下载，懒加载脚本完全无用。

③ 它只能针对图片的懒加载，但无法懒加载页面的某个模块（即延迟渲染页面的DOM节点）。

因此，在原有的技术方案之上，必须实现新的方案来解决这些问题。受到淘宝的懒加载模块启发，思路如下：

① 提供一种方式来让我们手动为页面中每个需要懒加载的图片缓存它的src属性，例如：原来的图片为<img src="xxx.jpg" />,现在改为<img data-src="xxx.jpg">。这样，页面在解析的时候，所有懒加载的图片在所有的浏览器下都不会下载，图片进入视野区域时再将data-src赋值给src属性。

② 提供延迟加载页面模块的方案。将研究发现，textarea是个不错的容器，浏览器会将该标签内的内容当作普通文本看待。因此，可以将页面中需要懒加载的模块放入textarea容器中，带需要的时候再将其取出。淘宝美食网正是大量运用了模块延迟加载方案。http://chi.taobao.com/market/food/auto.php?spm=885.125570.154248.13.F5s7Bt。

基于上述思路，我写了一个懒加载的组件。该组件基于jQuery,提供的接口如下：

[javascript] view plain copy

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

init函数可以初始化该组件，它提供给我们的自定义选项如下：

[javascript] view plain copy

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

mod 分为自动和手动模式，自动模式正是前面讨论到的目前存在的实现方案，而手动方式是后来讨论的方案①，在手动方式下，我们需要将每个需要懒加载的图片的src属性缓存到一个用户可以自定义的属性中，默认为‘img-lazyload‘，即原始的图片改为<img img-lazyload=‘xxx.jpg‘>。

此外，不管是自动模式和手动模式下，都可以进行模块的懒加载，这时候，需要在每个模块的外层添加textarea容器，并且，将其visibility属性设置为hidden，class设置为一个用户可以自定义的值，默认为‘area-datalazyload‘。

实例如下：

[javascript] view plain copy

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

addCallback是特定元素即将出现时的回调函数。调用如下：

[html] view plain copy

1. datalazyload.addCallback($el,function(event){
2. //TO DO
3. })

其中$el是某个需要延迟加载的jquery对象，function是自定义的回调函数。

组件适用场景：① 有许多图片的页面，例如游戏特权首页：http://vip.qq.com/game.html

② 有许多模块，并且每个模块分工明确的页面，例如淘宝美食：http://chi.taobao.com/market/food/auto.php?spm=885.125570.154248.13.F5s7Bt。

组件如下:

[javascript] view plain copy

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

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