├── .gitignore ├── README.md ├── examples ├── index.html └── index.png └── src └── picLazyLoad.js /.gitignore: -------------------------------------------------------------------------------- 1 | #temp files 2 | *.DS_Store 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # picLazyLoad，图片懒加载插件 2 | 3 | ## 示例 4 | 5 | ![扫一扫](examples/index.png) 6 | [DEMO链接](http://ximan.github.io/picLazyLoad/examples/) -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | picLazyLoad，图片懒加载插件 6 | 114 | 115 | 116 |

西门的后花园

117 |

picLazyLoad，图片懒加载插件

118 |

根据网页滚动条懒加载，支持img标签和背景图片

119 |
120 |
121 | 122 |
123 |
124 |
125 |
126 |
127 | 128 |
129 |
130 |
131 |
132 |
133 | 134 |
135 |
136 |
137 |
138 |
139 | 140 |
141 |
142 |
143 |
144 |
145 | 146 |
147 |
148 |
149 |
150 |
151 | 152 |
153 |
154 |
155 | 156 |

容器横向滚动懒加载

157 |
158 |
159 | 160 |
161 |
162 | 163 |
164 |
165 | 166 |
167 |
168 | 169 |
170 |
171 | 172 |
173 |
174 | 175 |
176 |
177 |
178 |
179 | 180 |
181 |
182 | 183 |
184 |
185 | 186 |
187 |
188 | 189 |
190 |
191 | 192 |
193 |
194 | 195 |

容器纵向滚动懒加载

196 |
197 |
198 | 199 |
200 |
201 | 202 |
203 |
204 | 205 |
206 |
207 | 208 |
209 |
210 | 211 |
212 |
213 | 214 | 238 | 239 | -------------------------------------------------------------------------------- /examples/index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ximan/picLazyLoad/4e76b1f62418c5257dc57e8a8b5c7e82c9ca1df9/examples/index.png -------------------------------------------------------------------------------- /src/picLazyLoad.js: -------------------------------------------------------------------------------- 1 | /** 2 | * picLazyLoad 3 | * http://ons.me/484.html 4 | * 西门 5 | * 1.2.0(150929) 6 | */ 7 | 8 | ;(function(win, $){ 9 | var _winHeight = win.screen.height; 10 | 11 | var lazyLoad = function(option){ 12 | var me = this; 13 | init(this, option); 14 | }; 15 | 16 | function init(me, option){ 17 | me.option = extend({ 18 | parent: document.body, // 父层容器 19 | className: 'lazyload', // 懒加载类名 20 | direction: 'y', // 滚动方向 21 | threshold: 0, // 提前加载 22 | picError: 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=', // 图片加载失败替换 23 | callback : function(){} // 每次滚动回调 24 | }, option); 25 | 26 | 27 | // 父层默认window 28 | if(me.option.parent == document.body){ 29 | fnLazyLoad(me, me.option.parent); 30 | 31 | win.addEventListener('scroll',function(){ 32 | fnLazyLoad(me, me.option.parent); 33 | },false); 34 | 35 | // 父层非window 36 | }else{ 37 | var i = 0; 38 | me.$parent = document.querySelectorAll('.' + me.option.parent); 39 | me._parentLength = me.$parent.length; 40 | for(i; i < me._parentLength; i++){ 41 | var $me = me.$parent[i]; 42 | // 获取外层参考容器的值 43 | me._parentOffsetTop = $me.getBoundingClientRect().top; 44 | me._parentOffsetLeft = $me.getBoundingClientRect().left; 45 | me._parentWidth = $me.clientWidth; 46 | me._parentHeight = $me.clientHeight; 47 | 48 | // 调用懒加载方法 49 | fnLazyLoad(me, $me); 50 | 51 | $me.addEventListener('scroll',function(){ 52 | fnLazyLoad(me, this); 53 | },false); 54 | } 55 | } 56 | } 57 | 58 | // extend 59 | function extend(){ 60 | var _extend = function me(dest, source) { 61 | for (var name in dest) { 62 | if (dest.hasOwnProperty(name)) { 63 | //当前属性是否为对象,如果为对象，则进行递归 64 | if ((dest[name] instanceof Object) && (source[name] instanceof Object)) { 65 | me(dest[name], source[name]); 66 | } 67 | //检测该属性是否存在 68 | if (source.hasOwnProperty(name)) { 69 | continue; 70 | } else { 71 | source[name] = dest[name]; 72 | } 73 | } 74 | } 75 | }; 76 | var _result = {}, 77 | arr = arguments; 78 | //遍历属性，至后向前 79 | if (!arr.length) return {}; 80 | for (var i = arr.length - 1; i >= 0; i--) { 81 | _extend(arr[i], _result); 82 | } 83 | arr[0] = _result; 84 | return _result; 85 | } 86 | 87 | // 懒加载方法 88 | function fnLazyLoad(me, $parent){ 89 | var i = 0; 90 | var $pic = $parent.querySelectorAll('.' + me.option.className); 91 | var _legnth = $pic.length; 92 | for(i; i < _legnth; i++){ 93 | var $me = $pic[i]; 94 | var _offsetTop = $me.getBoundingClientRect().top; 95 | var _offsetLeft = $me.getBoundingClientRect().left; 96 | var nodeName = $me.nodeName; 97 | var original = $me.getAttribute('data-original'); 98 | 99 | // 父层默认window 100 | if(me.option.parent == document.body){ 101 | if(_offsetTop - me.option.threshold <= _winHeight){ 102 | lazyLoadPic(); 103 | } 104 | // 父层非window 105 | }else{ 106 | // 父层滚动条竖 107 | if(me.option.direction == 'y'){ 108 | if(_offsetTop - me._parentOffsetTop - me.option.threshold <= me._parentHeight){ 109 | lazyLoadPic(); 110 | } 111 | // 父层滚动条横 112 | }else{ 113 | if(_offsetLeft - me._parentOffsetLeft - me.option.threshold <= me._parentWidth){ 114 | lazyLoadPic(); 115 | } 116 | } 117 | } 118 | // 懒加载图片 119 | function lazyLoadPic(){ 120 | if(original){ 121 | if(nodeName == 'IMG'){ 122 | $me.setAttribute('src', original); 123 | $me.onerror = function(){ 124 | this.setAttribute('src',me.option.picError); 125 | }; 126 | }else{ 127 | $me.style.backgroundImage ='url('+original+')'; 128 | } 129 | me.option.callback($me); 130 | $me.removeAttribute('data-original'); 131 | } 132 | } 133 | 134 | } 135 | } 136 | 137 | picLazyLoad = function(option){ 138 | var options = typeof option == 'object' && option; 139 | return new lazyLoad(options); 140 | }; 141 | })(window, window.Zepto || window.jQuery); --------------------------------------------------------------------------------