55 |
56 |
57 |
58 | 然后你在你的代码中加入:
59 |
60 |
$(".lazy").lazyload();
61 |
62 | 这会使得所有class为lazy的元素被延迟加载
63 |
64 | h3. 高级
65 |
66 | h4. 在AJAX加载的内容中使用
67 |
68 |
69 |
70 |
71 | $("#container").one("click", function() {
72 | $("#container").load("images.html", function(response, status, xhr) {
73 | $("img.lazy").lazyload();
74 | });
75 | });
76 |
77 |
78 | 请参阅 `enabled_ajax.html`
79 |
80 | h4. 与css背景图一起使用
81 |
82 |
83 |
84 |
85 | $("div.lazy").lazyload();
86 | // 或加入某些效果
87 | $("div.lazy").lazyload({
88 | effect : "fadeIn"
89 | });
90 |
91 |
92 | 请参阅 `enabled_background.html`
93 |
94 | h4. 图片在某个容器中滚动
95 |
96 |
97 |
98 |
99 | #container {
100 | height: 600px;
101 | overflow: scroll;
102 | }
103 |
104 |
105 |
106 | $("img.lazy").lazyload({
107 | effect : "fadeIn",
108 | container: $("#container")
109 | });
110 |
111 |
112 | 请参阅 `enabled_container.html`
113 |
114 | h4. 在`scrollstop`(或其他自定义事件)时判断是否应该加载图片
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 | $("img.lazy").lazyload({
124 | event: "scrollstop"
125 | });
126 |
127 |
128 | 请参阅 `enabled_gazillion.php`
129 |
130 | h4. 图片在某个容器中的水平方向滚动
131 |
132 |
133 |
134 |
135 | #container {
136 | width: 800px;
137 | overflow: scroll;
138 | }
139 | #inner_container {
140 | width: 4750px;
141 | }
142 |
143 |
144 |
145 | $("img.lazy").lazyload({
146 | container: $("#container")
147 | });
148 |
149 |
150 | 请参阅 `enabled_wide_container.html`
151 |
152 | h4. 加入fadeIn效果
153 |
154 |
155 |
156 |
157 | $("img.lazy").lazyload({
158 | effect : "fadeIn"
159 | });
160 |
161 |
162 | 请参阅 `enabled_fadein.html`
163 |
164 | h4. 在5秒延迟后加载图片
165 |
166 |
167 |
168 |
169 | $(function() {
170 | $("img.lazy").lazyload({
171 | event : "sporty"
172 | });
173 | });
174 |
175 | $(window).bind("load", function() {
176 | var timeout = setTimeout(function() {
177 | $("img.lazy").trigger("sporty")
178 | }, 5000);
179 | });
180 |
181 |
182 | 请参阅 `enabled_timeout.html`
183 |
184 | h4. 在水平方向很宽的页面中使用
185 |
186 |
187 |
188 |
189 | $("img.lazy").lazyload();
190 |
191 |
192 | 请参阅 `enabled_wide.html`
193 |
194 | h4. 在只能在竖直方向滚动的页面中使用
195 |
196 |
197 |
198 |
199 | $("img.lazy").lazyload({
200 | vertical_only: true
201 | });
202 |
203 |
204 | 请参阅 `enabled_vertical_only.html`
205 |
206 | h4. 重写图片的原始url
207 |
208 | 某些情况下，你需要对图片的原始url做一些处理
209 |
210 |
211 |
212 |
213 | $("img.lazy").lazyload({
214 | url_rewriter_fn:function($element,originalSrcInAttr){
215 | // this -> image element
216 | if(originalSrcInAttr == 'img/bmw_m1_hood.jpg'){ // in the example, we changed the first image's url to another
217 | return 'img/bmw_m1_hood_rewritten.jpg'
218 | }
219 | return originalSrcInAttr
220 | }
221 | })
222 | // 回调函数中，`this`指向出现的图片元素的节点，参数第一项为当前元素的jQuery|Zepto对象，第二项为当前元素的图片的原始url
223 |
224 |
225 | h4. 不使用假图片预加载
226 |
227 | 默认情况下，我们在加载图片时，会先创建一个 Image 对象（fake image）将远端的图片加载到本地，再更改真正需要此图片的元素的 src 或 background-image 属性。这样用户看上去图片不是被缓慢加载出来的，而是在立即展现，或能添加诸如 fadeIn 类的效果。
228 |
229 | 但是如果图片是从某个接口动态返回的，而不是实际的一个静态文件，上述机制在某些情况下可能导致图片被加载两次（创建的Image对象会加载一次，实际DOM树中的元素设置 src 或 background-image 时又会加载一次），此时你可以将 no_fake_img_loader 参数设置为true，这样不会有 fake image 的机制，从而规避这种问题。
230 |
231 | 请注意 "与srcset属性一起使用":#%E4%B8%8Esrcset%E5%B1%9E%E6%80%A7%E4%B8%80%E8%B5%B7%E4%BD%BF%E7%94%A8 时，则一定会开启“不使用假图片预加载”，而无论你设置的no_fake_img_loader的值是true还是false。
232 |
233 |
234 |
235 |
236 | $("img.lazy").lazyload({
237 | no_fake_img_loader:true
238 | })
239 |
240 |
241 | 请参阅 `enabled_no_fake_img_loader.html`
242 |
243 | h4. 与AMD模块加载器（如requirejs）一起使用
244 |
245 |
246 |
247 |
248 | require(['jquery','../lazyload'],function($){
249 | $(".lazy").lazyload()
250 | })
251 |
252 |
253 | 请参阅 `enabled_amd.html`
254 |
255 | h4. 与srcset属性一起使用
256 |
257 | 更多详情请见 `enabled_srcset.html`
258 |
259 |
260 |
261 |
262 | $("img.lazy").lazyload()
263 |
264 |
265 | 请参阅 `enabled_srcset.html`
266 |
267 | h4. options对象
268 |
269 | 你可以将options对象当做`lazyload`方法的第一个参数来使用。
270 |
271 |
272 | var options = {
273 | // 默认情况下，图像会在出现在屏幕上时被加载。如果你想的图像更早地加载，可以使用threshold参数。设置threshold为200，将导致图像在它离视窗边缘还有200px时开始加载。
274 | threshold : 0, // default: 0. 另一个例子: 200
275 |
276 | // 在页面滚动后，该插件将所有未加载的图像循环一遍。并在循环检查图像是否在视窗中。默认情况下，发现第一个位于视窗外的图片时，循环停止。这是基于以下的假设：页面上图像的顺序与它们在HTML代码中的顺序是一致的。然而对于某些布局，这可能是错误的。你可以通过设置failure_limit参数来控制循环终止的行为（failure_limit参数的数值为最多允许多少张图片被检查出位于视窗外后停止检查循环中剩余未检查的图片），当你将它设置为一个比较大的数值，显著多余总的图片数量（如9999）时，则可以认为会检测到每一张图片。
277 | failure_limit : 0, // default: 0. 另一个例子: 10
278 |
279 | // 指定触发什么事件时，开始加载真实的图片。你可以使用jQuery中已有的事件，如click或mouseover。你也可以使用自定义的事件如sporty或foobar。当事件是`scroll`或类似事件类型时，还需要检查图像是否已出现在视窗中。
280 | event : 'scroll', // default: 'scroll'. 另一个例子: 'click'
281 |
282 | // 默认情况下插件在等待图片完全加载后调用show()。你可以使用想要的任何效果。下面的代码使用了fadeIn效果。你可以在demo页面中查看该效果。
283 | effect : 'show', // default: 'show'. 另一个例子: 'fadein'
284 |
285 | // 上述效果（`effect`）函数的参数数组。举两个例子，如果`effect`参数设置为`show`且`effect_params`参数设置为[400]，将会调用`$element.show(400)`，即在400ms后显示图片；如果`effect`参数设置为`fadein`且`effect_params`参数设置为[400,completeFunction]，将会调用`fadein(400,completeFunction)`，即在400ms内渐入显示图片，并在渐入动画完成时调用`completeFunction`。
286 | effect_params : null, // default: undefined. 另一个例子: [400].
287 |
288 | // 你可以将改插件运用在某个容器内，如一个有滚动条的div。只需要传递容器的jQuery对象。我们有在纵向和横向滚动的容器中使用插件的两个demo。
289 | container : window, // default: 'show'. 另一个例子: $('#container')
290 |
291 | // 默认情况下，图片的真实url被设置在`data-original`属性内，你可以通过修改下面这个值来改变这个属性名（如`url`，这样插件将在`data-url`属性中查找图片的真实地址）注意下面这个值是不用包含`data-`头的。
292 | data_attribute : 'original', // default: 'original'. 另一个例子: 'url'
293 |
294 | // 当你将图片懒加载技术与`srcset`一起使用时，你不能将`srcset`的值直接写在`srcset`内，否则会导致图片立即加载。默认情况下，你应该写在属性`data-original-srcset`内，这样lazyload插件会帮你在合适的时候将它的赋值到`srcset`上。你可以通过修改下面这个值来改变这个属性名。注意下面这个值是不用包含`data-`头的。
295 | data_srcset_attribute : 'original-srcset', // default: 'original-srcset'. 另一个例子: 'o-srcset'
296 |
297 | // 当图片在视窗中出现时回调。`this`指向出现的图片元素的节点，参数第一项为当前元素的jQuery|Zepto对象，第二项为尚未出现的图片的数量，第三项为配置参数对象。
298 | appear : function(){}, // default: `the emptyFunc`. 另一个例子: function($elements, elements_left, options){}
299 |
300 | // 当图片加载完毕时回调。`this`指向出现的图片元素的节点，参数第一项为当前元素的jQuery|Zepto对象，第二项为尚未出现的图片的数量，第三项为配置参数对象。
301 | load : function(){}, // default: `the emptyFunc`. 另一个例子: function($elements, elements_left, options){}
302 |
303 | // 在大多数情况下，页面只能纵向滚动。此时，只需要检查图片的竖直位置是否出现在视图中即可。如果这样做能提高性能。你可以在只能纵向滚动的页面中将`vertical_only`参数设置为true
304 | vertical_only : false, // default: false. 另一个例子: true
305 |
306 | // 默认情况下，lazyload会在`window`的`scroll`、`resize`事件被触发时，检查图片是否已经出现在视窗中，但用户一次缩放屏幕通常可能连续触发多次resize事件；除了iOS以外的设备，用户一次滚屏也可能触发多次scroll事件，这造成了性能上的浪费。你可以通过这个参数设置两次检查之间最少的间隔时间，用来提高性能。当设置为0时，则每次触发`scroll`、`resize`事件时都会检测
307 | check_appear_throttle_time : 300, // default: 300. 另一个例子: 0
308 |
309 | // 重写图片的原始url。回调函数中，`this`指向出现的图片元素的节点，参数第一项为当前元素的jQuery|Zepto对象，第二项为当前元素的图片的原始url
310 | url_rewriter_fn : function(){}, // default: `the emptyFunc`. 另一个例子: function($element,originalSrcInAttr){}
311 |
312 | // 不使用假图片预加载（详见上面“高级”中的“不使用假图片预加载”）
313 | no_fake_img_loader : false, // default: false. 另一个例子: true
314 |
315 | // 如果一个img元素没有指定src属性，我们使用这个placeholder，在真正的图片被加载之前，此img会呈现这个占位图。
316 | placeholder_data_img : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC',
317 |
318 | // IE6/7 的 placeholder。这是我当时在百度时的cdn地址，建议改为你服务器上的任一张灰色或白色的1*1的小图
319 | placeholder_real_img : 'http://webmap3.map.bdimg.com/yyfm/lazyload/0.0.1/img/placeholder.png'
320 | }
321 |
322 | $("img.lazy").lazyload(options);
323 |
324 |
325 | h4. 移除skip_invisible属性
326 |
327 | 由于display:none时，jQuery/Zepto中的`$(selector).offset().top/left`属性始终为0( "链接":http://bugs.jquery.com/ticket/3037 )，因此该属性为false并且图片一开始display:none时，由于无法得到该标签距离文档顶部的实际像素数，图片在一开始就会被加载上来，违背了lazyload的初衷。因此该版本中删掉了该属性。lazyload不会去管display:none的图片，可能会出现当将display:none改变为其它值，图片仍然没有被加载的情况，但是只要滑动滚轮触发scroll或event中设定的事件，图片还是可以被加载出来的，examples中的remove_invisible.html展示了这一场景
328 |
329 | h2. License
330 |
331 | 所有代码遵循 "MIT License":http://www.opensource.org/licenses/mit-license.php. 所有图片license是 "Creative Commons Attribution 3.0 Unported License":http://creativecommons.org/licenses/by/3.0/deed.en_US 。也就是说你可以自由地做任何你想做的事情。只是不能在代码中移除我的名字。
332 |
333 |
334 |
335 |
336 | h1. English
337 |
338 | "查看中文文档请点击":#%E4%B8%AD%E6%96%87
339 |
340 | h2. Lazy Load Plugin for jQuery | Zepto
341 |
342 | Lazy Load delays loading of images in long web pages. Images outside of viewport wont be loaded before user scrolls to them. This is opposite of image preloading.
343 |
344 | Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.
345 |
346 | Lazy Load is inspired by "YUI ImageLoader":http://developer.yahoo.com/yui/imageloader/ Utility by Matt Mlinac.
347 |
348 | This project is forked from "tuupola/jquery_lazyload":https://github.com/tuupola/jquery_lazyload and add features below:
349 | * Modified many details to improve performance;
350 | * IE6/7 supported;
351 | * Can dynamically modify the image's url on demand before image loaded;
352 | * Available with "Zepto":https://github.com/madrobby/zepto ;
353 | * `vertical_only` \ `minimum_interval` \ `use_minimum_interval_in_ios` \ `no_fake_img_loader` options.
354 |
355 | h2. Current Users
356 | * "百度地图":http://map.baidu.com/
357 | * "百度团购":http://tuan.baidu.com/
358 | * +You
359 |
360 | h2. How to Use?
361 |
362 | h3. Basic
363 |
364 | Lazy Load depends on jQuery or Zepto. Include them in end of your HTML code:
365 |
366 |
367 |
368 |
369 |
370 | You can use our cdn server:
371 |
372 |
373 |
374 |
375 |
376 | You must alter your HTML code. URL of the real image must be put into data-original attribute. It is good idea to give Lazy Loaded image a specific class. This way you can easily control which images plugin is binded to. Note that you should have width and height attributes in your image tag, or gives the width and height via CSS.
377 |
378 |
379 |
380 |
397 |
398 |
399 |
400 | then in your code do:
401 |
402 |
$(".lazy").lazyload();
403 |
404 | This causes all elements of class lazy to be lazy loaded.
405 |
406 | h3. Advanced
407 |
408 | h4. With AJAX loaded content
409 |
410 |
411 |
412 |
413 | $("#container").one("click", function() {
414 | $("#container").load("images.html", function(response, status, xhr) {
415 | $("img.lazy").lazyload();
416 | });
417 | });
418 |
419 |
420 | See `enabled_ajax.html`
421 |
422 | h4. With css background images
423 |
424 |
425 |
426 |
427 | $("div.lazy").lazyload();
428 | // Or add some effect
429 | $("div.lazy").lazyload({
430 | effect : "fadeIn"
431 | });
432 |
433 |
434 | See `enabled_background.html`
435 |
436 | h4. Scrolling in a container
437 |
438 |
439 |
440 |
441 | #container {
442 | height: 600px;
443 | overflow: scroll;
444 | }
445 |
446 |
447 |
448 | $("img.lazy").lazyload({
449 | effect : "fadeIn",
450 | container: $("#container")
451 | });
452 |
453 |
454 | See `enabled_container.html`
455 |
456 | h4. Load when `scrollstop` (or other custom event)
457 |
458 |
459 |
460 |
461 |
462 |
463 |
464 |
465 | $("img.lazy").lazyload({
466 | event: "scrollstop"
467 | });
468 |
469 |
470 | See `enabled_gazillion.php`
471 |
472 | h4. Scrolling in a horizontal container
473 |
474 |
475 |
476 |
477 | #container {
478 | width: 800px;
479 | overflow: scroll;
480 | }
481 | #inner_container {
482 | width: 4750px;
483 | }
484 |
485 |
486 |
487 | $("img.lazy").lazyload({
488 | container: $("#container")
489 | });
490 |
491 |
492 | See `enabled_wide_container.html`
493 |
494 | h4. With fadeIn effect
495 |
496 |
497 |
498 |
499 | $("img.lazy").lazyload({
500 | effect : "fadeIn"
501 | });
502 |
503 |
504 | See `enabled_fadein.html`
505 |
506 | h4. Load images after `five second` delay
507 |
508 |
509 |
510 |
511 | $(function() {
512 | $("img.lazy").lazyload({
513 | event : "sporty"
514 | });
515 | });
516 |
517 | $(window).bind("load", function() {
518 | var timeout = setTimeout(function() {
519 | $("img.lazy").trigger("sporty")
520 | }, 5000);
521 | });
522 |
523 |
524 | See `enabled_timeout.html`
525 |
526 | h4. Using in (horizontal) wide page
527 |
528 |
529 |
530 |
531 | $("img.lazy").lazyload();
532 |
533 |
534 | See `enabled_wide.html`
535 |
536 | h4. Using in page which can only scroll vertically
537 |
538 |
539 |
540 |
541 | $("img.lazy").lazyload({
542 | vertical_only: true
543 | });
544 |
545 |
546 | See `enabled_vertical_only.html`
547 |
548 | h4. rewrite image's original url
549 |
550 | Sometimes, you need do something with the original url
551 |
552 |
553 |
554 |
555 | $("img.lazy").lazyload({
556 | url_rewriter_fn:function($element,originalSrcInAttr){
557 | // this -> image element
558 | if(originalSrcInAttr == 'img/bmw_m1_hood.jpg'){ // in the example, we changed the first image's url to another
559 | return 'img/bmw_m1_hood_rewritten.jpg'
560 | }
561 | return originalSrcInAttr
562 | }
563 | })
564 | // the arguments for callback function
565 | // `this` : currect image element node
566 | // 1st: currect element's jQuery|Zepto objcet
567 | // 2nd: currect element's original image src
568 |
569 |
570 | see `enabled_url_rewriter_fn.html`
571 |
572 | h4. Without fake image preload mechanism
573 |
574 | By default, when loading a image, we firtst create a Image object ( fake image ) which used to download the remote image to local, and then modify the `src` or `background-image` attribute to the real element which need the image. By doing this, the users feel like the images showing immediately or can use some dynamic effect such as `fadeIn` , rather than a slowly downloading.
575 |
576 | But if the image is returned by a dynamic interferce instead of a static file, the mechanism above may cause the image being loaded twice ( fake image object once, when setting the attribute `src` or `background-image` of the real element once more ), when this occurs, you can set the `no_fake_img_loader` parameter `true`, without the `fake image` mechanism to avoid this problem.
577 |
578 | Note that if use the `srcset` attribute, will enabled no_fake_img_loader, regardless of the value of this option is true or false.
579 |
580 |
581 |
582 |
583 | $("img.lazy").lazyload({
584 | no_fake_img_loader:true
585 | })
586 |
587 |
588 | see `enabled_no_fake_img_loader.html`
589 |
590 | h4. with AMD loader (such as `requirejs`)
591 |
592 |
593 |
594 |
595 | require(['jquery','../lazyload'],function($){
596 | $(".lazy").lazyload()
597 | })
598 |
599 |
600 | see `enabled_amd.html`
601 |
602 | h4. with `srcset` attribute
603 |
604 | more details on `enabled_srcset.html`
605 |
606 |
607 |
608 |
609 | $("img.lazy").lazyload()
610 |
611 |
612 | see `enabled_srcset.html`
613 |
614 | h4. The options object
615 |
616 | You can use the options object as the first argument in the `lazyload` method.
617 |
618 |
619 | var options = {
620 | // By default images are loaded when they appear on the screen. If you want images to load earlier use threshold parameter. Setting threshold to 200 causes image to load 200 pixels before it appears on viewport.
621 | threshold : 0, // default: 0. Another example: 200
622 |
623 | // After scrolling page plugin loops though unloaded images. Loop checks if image has become visible. By default loop is stopped when first image outside viewport is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong. You can control loading behaviour with failure_limit setting, if you set it to a relatively large value, significantly more than the total number of images (such as 9999), it is considered that checks each images.
624 | failure_limit : 0, // default: 0. Another example: 10
625 |
626 | // Specified an event, when it triggers, start loading the real images. You can use jQuery event such as click or mouseover. You can also use custom events such as sporty or foobar. if the event is `scroll` or a similar type, it also need to check if the image has appeared in the viewport. Default is to wait until user scrolls down and image appears on the viewport.
627 | event : 'scroll', // default: 'scroll'. Another example: 'click'
628 |
629 | // By default plugin waits for image to fully load and calls show(). You can use any effect you want. Following code uses fadeIn effect. Check how it works at effect demo page.
630 | effect : 'show', // default: 'show'. Another example: 'fadein'
631 |
632 | // the arguments array of `effect` function. For two examples, if `effect` is set to `show` and `effect_params` is set to [400], it will call `$element.show(400)` to show the image after 400ms; if `effect` is set to `fadein` and `effect_params` is set to [400,completeFunction], it will call `$element.fadein(400,completeFunction)` to fadeIn the image in 400ms and call the `completeFunction` when the animation is complete.
633 | effect_params : null, // default: undefined. Another example: [400].
634 |
635 | // You can also use plugin for images inside scrolling container, such as div with scrollbar. Just pass the container as jQuery object. There is a demo for horizontal and vertical container.
636 | container : window, // default: 'show'. Another example: $('#container')
637 |
638 | // By default images's original url set in `data-original` attribute, you can change it to Another attribute (such as `url`,so it will find the original url in `data-url` attribute). You can modify the following option's values to change the attribute name. Note that this value is not include `data-` prefix.
639 | data_attribute : 'original', // default: 'original'. Another example: 'url'
640 |
641 | // when use with `srcset` attribute ，you can not directly write the value of` srcset` in `srcset` attribute，otherwise it will cause the image immediately loaded。By default, you can write in the attribute `data-original-srcset` , so the lazyload plugin will help you at the right time it is assigned to the` srcset` attribute . You can modify the following option's values to change the attribute name. Note that this value is not include `data-` prefix.
642 | data_srcset_attribute : 'original-srcset', // default: 'original-srcset'. Another example: 'o-srcset'
643 |
644 | // Call when one image is appear to the viewport. The arguments for callback function: `this` : currect image element node, 1st: currect element's jQuery|Zepto objcet, 2nd: count of elements not appear yet, 3rd: the options.
645 | appear : function(){}, // default: `the emptyFunc`. Another example: function(elements_left, options){}
646 |
647 | // Call when one image is load. The arguments for callback function: `this` : currect image element node, 1st: currect element's jQuery|Zepto objcet, 2nd: count of elements not appear yet, 3rd: the options.
648 | load : function(){}, // default: `the emptyFunc`. Another example: function(elements_left, options){}
649 |
650 | // In most situations, page can only scroll vertically.At this time, only check images's vertical position will improve performance.You can only set vertical_only to true when page can only scroll vertically.
651 | vertical_only : false, // default: false. Another example: true
652 |
653 | // By default, lazyload will check whether the image has appeared in the viewport when `window`'s `scroll` or `resize` event is triggered, but once a user continuous zoom screens may usually triggered several times `resize` event; in addition to the iOS device, a user may also trigger several times `scroll` event once a scroll screen, which resulted in the waste of a performance. set the minimum interval between checks. When set to `0`, it will check in every scroll\resize event.
654 | check_appear_throttle_time : 300, // default: 300. Another example: 0
655 |
656 | // rewrite image's original url. the arguments for callback function: `this` : currect image element node, 1st: currect element's jQuery|Zepto objcet, 2nd: currect element's original image src
657 | url_rewriter_fn : function(){}, // default: `the emptyFunc`. Another example: function($element,originalSrcInAttr){}
658 |
659 | // Without fake image preload mechanism（See details above）
660 | no_fake_img_loader : false, // default: false. Another example: true
661 |
662 | // If element is an img and no src attribute given, use placeholder. Before the real image is loaded, this will show this img placeholder.
663 | placeholder_data_img : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC',
664 |
665 | // Placeholder for IE6/7. This is Baidu's cdn addresses, I recommend that you change the url to your server ,on either a gray or white small 1 * 1 png.
666 | placeholder_real_img : 'http://ditu.baidu.cn/yyfm/lazyload/0.0.1/img/placeholder.png'
667 | }
668 |
669 | $("img.lazy").lazyload(options);
670 |
671 |
672 | h4. The removal of skip_invisible attribute
673 |
674 | `$(selector).offset().top/left` are always zero( "link":http://bugs.jquery.com/ticket/3037 ) when `display:none` is set. As we can't get real offset of the element, the picture is always loaded when we set both `display:none` and 'skip_invisible = false'. It go against the intention of lazyload, so we decide to remove this attribute from options. lazyload will ignore pictures with display attribute set to none. Lazyload will not be triggered when display attribute is changed(i.e. remove_invisible.html). It may cause some trouble sometimes but scrolling your mouse will definately help!
675 |
676 | h2. License
677 |
678 | All code licensed under the "MIT License":http://www.opensource.org/licenses/mit-license.php. All images licensed under "Creative Commons Attribution 3.0 Unported License":http://creativecommons.org/licenses/by/3.0/deed.en_US. In other words you are basically free to do whatever you want. Just don't remove my name from the source.
679 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jieyou_lazyload",
3 | "main": "lazyload.js",
4 | "version": "1.4.1",
5 | "homepage": "https://github.com/jieyou/lazyload",
6 | "authors": [
7 | "jieyou
"
8 | ],
9 | "license": "MIT",
10 | "ignore": [
11 | "**/.*",
12 | "node_modules",
13 | "bower_components",
14 | "test",
15 | "tests"
16 | ]
17 | }
18 |
--------------------------------------------------------------------------------
/examples/css/font-awesome.min.css:
--------------------------------------------------------------------------------
1 | @font-face{font-family:'FontAwesome';src:url('../font/fontawesome-webfont.eot?v=3.2.1');src:url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'),url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');font-weight:normal;font-style:normal;}[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;}
2 | [class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none;}
3 | .icon-large:before{vertical-align:-10%;font-size:1.3333333333333333em;}
4 | a [class^="icon-"],a [class*=" icon-"]{display:inline;}
5 | [class^="icon-"].icon-fixed-width,[class*=" icon-"].icon-fixed-width{display:inline-block;width:1.1428571428571428em;text-align:right;padding-right:0.2857142857142857em;}[class^="icon-"].icon-fixed-width.icon-large,[class*=" icon-"].icon-fixed-width.icon-large{width:1.4285714285714286em;}
6 | .icons-ul{margin-left:2.142857142857143em;list-style-type:none;}.icons-ul>li{position:relative;}
7 | .icons-ul .icon-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;text-align:center;line-height:inherit;}
8 | [class^="icon-"].hide,[class*=" icon-"].hide{display:none;}
9 | .icon-muted{color:#eeeeee;}
10 | .icon-light{color:#ffffff;}
11 | .icon-dark{color:#333333;}
12 | .icon-border{border:solid 1px #eeeeee;padding:.2em .25em .15em;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
13 | .icon-2x{font-size:2em;}.icon-2x.icon-border{border-width:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
14 | .icon-3x{font-size:3em;}.icon-3x.icon-border{border-width:3px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
15 | .icon-4x{font-size:4em;}.icon-4x.icon-border{border-width:4px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
16 | .icon-5x{font-size:5em;}.icon-5x.icon-border{border-width:5px;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;}
17 | .pull-right{float:right;}
18 | .pull-left{float:left;}
19 | [class^="icon-"].pull-left,[class*=" icon-"].pull-left{margin-right:.3em;}
20 | [class^="icon-"].pull-right,[class*=" icon-"].pull-right{margin-left:.3em;}
21 | [class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;margin-top:0;}
22 | .icon-white,.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"],.dropdown-submenu:hover>a>[class^="icon-"],.dropdown-submenu:hover>a>[class*=" icon-"]{background-image:none;}
23 | .btn [class^="icon-"].icon-large,.nav [class^="icon-"].icon-large,.btn [class*=" icon-"].icon-large,.nav [class*=" icon-"].icon-large{line-height:.9em;}
24 | .btn [class^="icon-"].icon-spin,.nav [class^="icon-"].icon-spin,.btn [class*=" icon-"].icon-spin,.nav [class*=" icon-"].icon-spin{display:inline-block;}
25 | .nav-tabs [class^="icon-"],.nav-pills [class^="icon-"],.nav-tabs [class*=" icon-"],.nav-pills [class*=" icon-"],.nav-tabs [class^="icon-"].icon-large,.nav-pills [class^="icon-"].icon-large,.nav-tabs [class*=" icon-"].icon-large,.nav-pills [class*=" icon-"].icon-large{line-height:.9em;}
26 | .btn [class^="icon-"].pull-left.icon-2x,.btn [class*=" icon-"].pull-left.icon-2x,.btn [class^="icon-"].pull-right.icon-2x,.btn [class*=" icon-"].pull-right.icon-2x{margin-top:.18em;}
27 | .btn [class^="icon-"].icon-spin.icon-large,.btn [class*=" icon-"].icon-spin.icon-large{line-height:.8em;}
28 | .btn.btn-small [class^="icon-"].pull-left.icon-2x,.btn.btn-small [class*=" icon-"].pull-left.icon-2x,.btn.btn-small [class^="icon-"].pull-right.icon-2x,.btn.btn-small [class*=" icon-"].pull-right.icon-2x{margin-top:.25em;}
29 | .btn.btn-large [class^="icon-"],.btn.btn-large [class*=" icon-"]{margin-top:0;}.btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x,.btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-top:.05em;}
30 | .btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x{margin-right:.2em;}
31 | .btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-left:.2em;}
32 | .nav-list [class^="icon-"],.nav-list [class*=" icon-"]{line-height:inherit;}
33 | .icon-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.icon-stack [class^="icon-"],.icon-stack [class*=" icon-"]{display:block;text-align:center;position:absolute;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;}
34 | .icon-stack .icon-stack-base{font-size:2em;*line-height:1em;}
35 | .icon-spin{display:inline-block;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear;}
36 | a .icon-stack,a .icon-spin{display:inline-block;text-decoration:none;}
37 | @-moz-keyframes spin{0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(359deg);}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(359deg);}}@-o-keyframes spin{0%{-o-transform:rotate(0deg);} 100%{-o-transform:rotate(359deg);}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg);} 100%{-ms-transform:rotate(359deg);}}@keyframes spin{0%{transform:rotate(0deg);} 100%{transform:rotate(359deg);}}.icon-rotate-90:before{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
38 | .icon-rotate-180:before{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}
39 | .icon-rotate-270:before{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
40 | .icon-flip-horizontal:before{-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1);}
41 | .icon-flip-vertical:before{-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1);}
42 | a .icon-rotate-90:before,a .icon-rotate-180:before,a .icon-rotate-270:before,a .icon-flip-horizontal:before,a .icon-flip-vertical:before{display:inline-block;}
43 | .icon-glass:before{content:"\f000";}
44 | .icon-music:before{content:"\f001";}
45 | .icon-search:before{content:"\f002";}
46 | .icon-envelope-alt:before{content:"\f003";}
47 | .icon-heart:before{content:"\f004";}
48 | .icon-star:before{content:"\f005";}
49 | .icon-star-empty:before{content:"\f006";}
50 | .icon-user:before{content:"\f007";}
51 | .icon-film:before{content:"\f008";}
52 | .icon-th-large:before{content:"\f009";}
53 | .icon-th:before{content:"\f00a";}
54 | .icon-th-list:before{content:"\f00b";}
55 | .icon-ok:before{content:"\f00c";}
56 | .icon-remove:before{content:"\f00d";}
57 | .icon-zoom-in:before{content:"\f00e";}
58 | .icon-zoom-out:before{content:"\f010";}
59 | .icon-power-off:before,.icon-off:before{content:"\f011";}
60 | .icon-signal:before{content:"\f012";}
61 | .icon-gear:before,.icon-cog:before{content:"\f013";}
62 | .icon-trash:before{content:"\f014";}
63 | .icon-home:before{content:"\f015";}
64 | .icon-file-alt:before{content:"\f016";}
65 | .icon-time:before{content:"\f017";}
66 | .icon-road:before{content:"\f018";}
67 | .icon-download-alt:before{content:"\f019";}
68 | .icon-download:before{content:"\f01a";}
69 | .icon-upload:before{content:"\f01b";}
70 | .icon-inbox:before{content:"\f01c";}
71 | .icon-play-circle:before{content:"\f01d";}
72 | .icon-rotate-right:before,.icon-repeat:before{content:"\f01e";}
73 | .icon-refresh:before{content:"\f021";}
74 | .icon-list-alt:before{content:"\f022";}
75 | .icon-lock:before{content:"\f023";}
76 | .icon-flag:before{content:"\f024";}
77 | .icon-headphones:before{content:"\f025";}
78 | .icon-volume-off:before{content:"\f026";}
79 | .icon-volume-down:before{content:"\f027";}
80 | .icon-volume-up:before{content:"\f028";}
81 | .icon-qrcode:before{content:"\f029";}
82 | .icon-barcode:before{content:"\f02a";}
83 | .icon-tag:before{content:"\f02b";}
84 | .icon-tags:before{content:"\f02c";}
85 | .icon-book:before{content:"\f02d";}
86 | .icon-bookmark:before{content:"\f02e";}
87 | .icon-print:before{content:"\f02f";}
88 | .icon-camera:before{content:"\f030";}
89 | .icon-font:before{content:"\f031";}
90 | .icon-bold:before{content:"\f032";}
91 | .icon-italic:before{content:"\f033";}
92 | .icon-text-height:before{content:"\f034";}
93 | .icon-text-width:before{content:"\f035";}
94 | .icon-align-left:before{content:"\f036";}
95 | .icon-align-center:before{content:"\f037";}
96 | .icon-align-right:before{content:"\f038";}
97 | .icon-align-justify:before{content:"\f039";}
98 | .icon-list:before{content:"\f03a";}
99 | .icon-indent-left:before{content:"\f03b";}
100 | .icon-indent-right:before{content:"\f03c";}
101 | .icon-facetime-video:before{content:"\f03d";}
102 | .icon-picture:before{content:"\f03e";}
103 | .icon-pencil:before{content:"\f040";}
104 | .icon-map-marker:before{content:"\f041";}
105 | .icon-adjust:before{content:"\f042";}
106 | .icon-tint:before{content:"\f043";}
107 | .icon-edit:before{content:"\f044";}
108 | .icon-share:before{content:"\f045";}
109 | .icon-check:before{content:"\f046";}
110 | .icon-move:before{content:"\f047";}
111 | .icon-step-backward:before{content:"\f048";}
112 | .icon-fast-backward:before{content:"\f049";}
113 | .icon-backward:before{content:"\f04a";}
114 | .icon-play:before{content:"\f04b";}
115 | .icon-pause:before{content:"\f04c";}
116 | .icon-stop:before{content:"\f04d";}
117 | .icon-forward:before{content:"\f04e";}
118 | .icon-fast-forward:before{content:"\f050";}
119 | .icon-step-forward:before{content:"\f051";}
120 | .icon-eject:before{content:"\f052";}
121 | .icon-chevron-left:before{content:"\f053";}
122 | .icon-chevron-right:before{content:"\f054";}
123 | .icon-plus-sign:before{content:"\f055";}
124 | .icon-minus-sign:before{content:"\f056";}
125 | .icon-remove-sign:before{content:"\f057";}
126 | .icon-ok-sign:before{content:"\f058";}
127 | .icon-question-sign:before{content:"\f059";}
128 | .icon-info-sign:before{content:"\f05a";}
129 | .icon-screenshot:before{content:"\f05b";}
130 | .icon-remove-circle:before{content:"\f05c";}
131 | .icon-ok-circle:before{content:"\f05d";}
132 | .icon-ban-circle:before{content:"\f05e";}
133 | .icon-arrow-left:before{content:"\f060";}
134 | .icon-arrow-right:before{content:"\f061";}
135 | .icon-arrow-up:before{content:"\f062";}
136 | .icon-arrow-down:before{content:"\f063";}
137 | .icon-mail-forward:before,.icon-share-alt:before{content:"\f064";}
138 | .icon-resize-full:before{content:"\f065";}
139 | .icon-resize-small:before{content:"\f066";}
140 | .icon-plus:before{content:"\f067";}
141 | .icon-minus:before{content:"\f068";}
142 | .icon-asterisk:before{content:"\f069";}
143 | .icon-exclamation-sign:before{content:"\f06a";}
144 | .icon-gift:before{content:"\f06b";}
145 | .icon-leaf:before{content:"\f06c";}
146 | .icon-fire:before{content:"\f06d";}
147 | .icon-eye-open:before{content:"\f06e";}
148 | .icon-eye-close:before{content:"\f070";}
149 | .icon-warning-sign:before{content:"\f071";}
150 | .icon-plane:before{content:"\f072";}
151 | .icon-calendar:before{content:"\f073";}
152 | .icon-random:before{content:"\f074";}
153 | .icon-comment:before{content:"\f075";}
154 | .icon-magnet:before{content:"\f076";}
155 | .icon-chevron-up:before{content:"\f077";}
156 | .icon-chevron-down:before{content:"\f078";}
157 | .icon-retweet:before{content:"\f079";}
158 | .icon-shopping-cart:before{content:"\f07a";}
159 | .icon-folder-close:before{content:"\f07b";}
160 | .icon-folder-open:before{content:"\f07c";}
161 | .icon-resize-vertical:before{content:"\f07d";}
162 | .icon-resize-horizontal:before{content:"\f07e";}
163 | .icon-bar-chart:before{content:"\f080";}
164 | .icon-twitter-sign:before{content:"\f081";}
165 | .icon-facebook-sign:before{content:"\f082";}
166 | .icon-camera-retro:before{content:"\f083";}
167 | .icon-key:before{content:"\f084";}
168 | .icon-gears:before,.icon-cogs:before{content:"\f085";}
169 | .icon-comments:before{content:"\f086";}
170 | .icon-thumbs-up-alt:before{content:"\f087";}
171 | .icon-thumbs-down-alt:before{content:"\f088";}
172 | .icon-star-half:before{content:"\f089";}
173 | .icon-heart-empty:before{content:"\f08a";}
174 | .icon-signout:before{content:"\f08b";}
175 | .icon-linkedin-sign:before{content:"\f08c";}
176 | .icon-pushpin:before{content:"\f08d";}
177 | .icon-external-link:before{content:"\f08e";}
178 | .icon-signin:before{content:"\f090";}
179 | .icon-trophy:before{content:"\f091";}
180 | .icon-github-sign:before{content:"\f092";}
181 | .icon-upload-alt:before{content:"\f093";}
182 | .icon-lemon:before{content:"\f094";}
183 | .icon-phone:before{content:"\f095";}
184 | .icon-unchecked:before,.icon-check-empty:before{content:"\f096";}
185 | .icon-bookmark-empty:before{content:"\f097";}
186 | .icon-phone-sign:before{content:"\f098";}
187 | .icon-twitter:before{content:"\f099";}
188 | .icon-facebook:before{content:"\f09a";}
189 | .icon-github:before{content:"\f09b";}
190 | .icon-unlock:before{content:"\f09c";}
191 | .icon-credit-card:before{content:"\f09d";}
192 | .icon-rss:before{content:"\f09e";}
193 | .icon-hdd:before{content:"\f0a0";}
194 | .icon-bullhorn:before{content:"\f0a1";}
195 | .icon-bell:before{content:"\f0a2";}
196 | .icon-certificate:before{content:"\f0a3";}
197 | .icon-hand-right:before{content:"\f0a4";}
198 | .icon-hand-left:before{content:"\f0a5";}
199 | .icon-hand-up:before{content:"\f0a6";}
200 | .icon-hand-down:before{content:"\f0a7";}
201 | .icon-circle-arrow-left:before{content:"\f0a8";}
202 | .icon-circle-arrow-right:before{content:"\f0a9";}
203 | .icon-circle-arrow-up:before{content:"\f0aa";}
204 | .icon-circle-arrow-down:before{content:"\f0ab";}
205 | .icon-globe:before{content:"\f0ac";}
206 | .icon-wrench:before{content:"\f0ad";}
207 | .icon-tasks:before{content:"\f0ae";}
208 | .icon-filter:before{content:"\f0b0";}
209 | .icon-briefcase:before{content:"\f0b1";}
210 | .icon-fullscreen:before{content:"\f0b2";}
211 | .icon-group:before{content:"\f0c0";}
212 | .icon-link:before{content:"\f0c1";}
213 | .icon-cloud:before{content:"\f0c2";}
214 | .icon-beaker:before{content:"\f0c3";}
215 | .icon-cut:before{content:"\f0c4";}
216 | .icon-copy:before{content:"\f0c5";}
217 | .icon-paperclip:before,.icon-paper-clip:before{content:"\f0c6";}
218 | .icon-save:before{content:"\f0c7";}
219 | .icon-sign-blank:before{content:"\f0c8";}
220 | .icon-reorder:before{content:"\f0c9";}
221 | .icon-list-ul:before{content:"\f0ca";}
222 | .icon-list-ol:before{content:"\f0cb";}
223 | .icon-strikethrough:before{content:"\f0cc";}
224 | .icon-underline:before{content:"\f0cd";}
225 | .icon-table:before{content:"\f0ce";}
226 | .icon-magic:before{content:"\f0d0";}
227 | .icon-truck:before{content:"\f0d1";}
228 | .icon-pinterest:before{content:"\f0d2";}
229 | .icon-pinterest-sign:before{content:"\f0d3";}
230 | .icon-google-plus-sign:before{content:"\f0d4";}
231 | .icon-google-plus:before{content:"\f0d5";}
232 | .icon-money:before{content:"\f0d6";}
233 | .icon-caret-down:before{content:"\f0d7";}
234 | .icon-caret-up:before{content:"\f0d8";}
235 | .icon-caret-left:before{content:"\f0d9";}
236 | .icon-caret-right:before{content:"\f0da";}
237 | .icon-columns:before{content:"\f0db";}
238 | .icon-sort:before{content:"\f0dc";}
239 | .icon-sort-down:before{content:"\f0dd";}
240 | .icon-sort-up:before{content:"\f0de";}
241 | .icon-envelope:before{content:"\f0e0";}
242 | .icon-linkedin:before{content:"\f0e1";}
243 | .icon-rotate-left:before,.icon-undo:before{content:"\f0e2";}
244 | .icon-legal:before{content:"\f0e3";}
245 | .icon-dashboard:before{content:"\f0e4";}
246 | .icon-comment-alt:before{content:"\f0e5";}
247 | .icon-comments-alt:before{content:"\f0e6";}
248 | .icon-bolt:before{content:"\f0e7";}
249 | .icon-sitemap:before{content:"\f0e8";}
250 | .icon-umbrella:before{content:"\f0e9";}
251 | .icon-paste:before{content:"\f0ea";}
252 | .icon-lightbulb:before{content:"\f0eb";}
253 | .icon-exchange:before{content:"\f0ec";}
254 | .icon-cloud-download:before{content:"\f0ed";}
255 | .icon-cloud-upload:before{content:"\f0ee";}
256 | .icon-user-md:before{content:"\f0f0";}
257 | .icon-stethoscope:before{content:"\f0f1";}
258 | .icon-suitcase:before{content:"\f0f2";}
259 | .icon-bell-alt:before{content:"\f0f3";}
260 | .icon-coffee:before{content:"\f0f4";}
261 | .icon-food:before{content:"\f0f5";}
262 | .icon-file-text-alt:before{content:"\f0f6";}
263 | .icon-building:before{content:"\f0f7";}
264 | .icon-hospital:before{content:"\f0f8";}
265 | .icon-ambulance:before{content:"\f0f9";}
266 | .icon-medkit:before{content:"\f0fa";}
267 | .icon-fighter-jet:before{content:"\f0fb";}
268 | .icon-beer:before{content:"\f0fc";}
269 | .icon-h-sign:before{content:"\f0fd";}
270 | .icon-plus-sign-alt:before{content:"\f0fe";}
271 | .icon-double-angle-left:before{content:"\f100";}
272 | .icon-double-angle-right:before{content:"\f101";}
273 | .icon-double-angle-up:before{content:"\f102";}
274 | .icon-double-angle-down:before{content:"\f103";}
275 | .icon-angle-left:before{content:"\f104";}
276 | .icon-angle-right:before{content:"\f105";}
277 | .icon-angle-up:before{content:"\f106";}
278 | .icon-angle-down:before{content:"\f107";}
279 | .icon-desktop:before{content:"\f108";}
280 | .icon-laptop:before{content:"\f109";}
281 | .icon-tablet:before{content:"\f10a";}
282 | .icon-mobile-phone:before{content:"\f10b";}
283 | .icon-circle-blank:before{content:"\f10c";}
284 | .icon-quote-left:before{content:"\f10d";}
285 | .icon-quote-right:before{content:"\f10e";}
286 | .icon-spinner:before{content:"\f110";}
287 | .icon-circle:before{content:"\f111";}
288 | .icon-mail-reply:before,.icon-reply:before{content:"\f112";}
289 | .icon-github-alt:before{content:"\f113";}
290 | .icon-folder-close-alt:before{content:"\f114";}
291 | .icon-folder-open-alt:before{content:"\f115";}
292 | .icon-expand-alt:before{content:"\f116";}
293 | .icon-collapse-alt:before{content:"\f117";}
294 | .icon-smile:before{content:"\f118";}
295 | .icon-frown:before{content:"\f119";}
296 | .icon-meh:before{content:"\f11a";}
297 | .icon-gamepad:before{content:"\f11b";}
298 | .icon-keyboard:before{content:"\f11c";}
299 | .icon-flag-alt:before{content:"\f11d";}
300 | .icon-flag-checkered:before{content:"\f11e";}
301 | .icon-terminal:before{content:"\f120";}
302 | .icon-code:before{content:"\f121";}
303 | .icon-reply-all:before{content:"\f122";}
304 | .icon-mail-reply-all:before{content:"\f122";}
305 | .icon-star-half-full:before,.icon-star-half-empty:before{content:"\f123";}
306 | .icon-location-arrow:before{content:"\f124";}
307 | .icon-crop:before{content:"\f125";}
308 | .icon-code-fork:before{content:"\f126";}
309 | .icon-unlink:before{content:"\f127";}
310 | .icon-question:before{content:"\f128";}
311 | .icon-info:before{content:"\f129";}
312 | .icon-exclamation:before{content:"\f12a";}
313 | .icon-superscript:before{content:"\f12b";}
314 | .icon-subscript:before{content:"\f12c";}
315 | .icon-eraser:before{content:"\f12d";}
316 | .icon-puzzle-piece:before{content:"\f12e";}
317 | .icon-microphone:before{content:"\f130";}
318 | .icon-microphone-off:before{content:"\f131";}
319 | .icon-shield:before{content:"\f132";}
320 | .icon-calendar-empty:before{content:"\f133";}
321 | .icon-fire-extinguisher:before{content:"\f134";}
322 | .icon-rocket:before{content:"\f135";}
323 | .icon-maxcdn:before{content:"\f136";}
324 | .icon-chevron-sign-left:before{content:"\f137";}
325 | .icon-chevron-sign-right:before{content:"\f138";}
326 | .icon-chevron-sign-up:before{content:"\f139";}
327 | .icon-chevron-sign-down:before{content:"\f13a";}
328 | .icon-html5:before{content:"\f13b";}
329 | .icon-css3:before{content:"\f13c";}
330 | .icon-anchor:before{content:"\f13d";}
331 | .icon-unlock-alt:before{content:"\f13e";}
332 | .icon-bullseye:before{content:"\f140";}
333 | .icon-ellipsis-horizontal:before{content:"\f141";}
334 | .icon-ellipsis-vertical:before{content:"\f142";}
335 | .icon-rss-sign:before{content:"\f143";}
336 | .icon-play-sign:before{content:"\f144";}
337 | .icon-ticket:before{content:"\f145";}
338 | .icon-minus-sign-alt:before{content:"\f146";}
339 | .icon-check-minus:before{content:"\f147";}
340 | .icon-level-up:before{content:"\f148";}
341 | .icon-level-down:before{content:"\f149";}
342 | .icon-check-sign:before{content:"\f14a";}
343 | .icon-edit-sign:before{content:"\f14b";}
344 | .icon-external-link-sign:before{content:"\f14c";}
345 | .icon-share-sign:before{content:"\f14d";}
346 | .icon-compass:before{content:"\f14e";}
347 | .icon-collapse:before{content:"\f150";}
348 | .icon-collapse-top:before{content:"\f151";}
349 | .icon-expand:before{content:"\f152";}
350 | .icon-euro:before,.icon-eur:before{content:"\f153";}
351 | .icon-gbp:before{content:"\f154";}
352 | .icon-dollar:before,.icon-usd:before{content:"\f155";}
353 | .icon-rupee:before,.icon-inr:before{content:"\f156";}
354 | .icon-yen:before,.icon-jpy:before{content:"\f157";}
355 | .icon-renminbi:before,.icon-cny:before{content:"\f158";}
356 | .icon-won:before,.icon-krw:before{content:"\f159";}
357 | .icon-bitcoin:before,.icon-btc:before{content:"\f15a";}
358 | .icon-file:before{content:"\f15b";}
359 | .icon-file-text:before{content:"\f15c";}
360 | .icon-sort-by-alphabet:before{content:"\f15d";}
361 | .icon-sort-by-alphabet-alt:before{content:"\f15e";}
362 | .icon-sort-by-attributes:before{content:"\f160";}
363 | .icon-sort-by-attributes-alt:before{content:"\f161";}
364 | .icon-sort-by-order:before{content:"\f162";}
365 | .icon-sort-by-order-alt:before{content:"\f163";}
366 | .icon-thumbs-up:before{content:"\f164";}
367 | .icon-thumbs-down:before{content:"\f165";}
368 | .icon-youtube-sign:before{content:"\f166";}
369 | .icon-youtube:before{content:"\f167";}
370 | .icon-xing:before{content:"\f168";}
371 | .icon-xing-sign:before{content:"\f169";}
372 | .icon-youtube-play:before{content:"\f16a";}
373 | .icon-dropbox:before{content:"\f16b";}
374 | .icon-stackexchange:before{content:"\f16c";}
375 | .icon-instagram:before{content:"\f16d";}
376 | .icon-flickr:before{content:"\f16e";}
377 | .icon-adn:before{content:"\f170";}
378 | .icon-bitbucket:before{content:"\f171";}
379 | .icon-bitbucket-sign:before{content:"\f172";}
380 | .icon-tumblr:before{content:"\f173";}
381 | .icon-tumblr-sign:before{content:"\f174";}
382 | .icon-long-arrow-down:before{content:"\f175";}
383 | .icon-long-arrow-up:before{content:"\f176";}
384 | .icon-long-arrow-left:before{content:"\f177";}
385 | .icon-long-arrow-right:before{content:"\f178";}
386 | .icon-apple:before{content:"\f179";}
387 | .icon-windows:before{content:"\f17a";}
388 | .icon-android:before{content:"\f17b";}
389 | .icon-linux:before{content:"\f17c";}
390 | .icon-dribbble:before{content:"\f17d";}
391 | .icon-skype:before{content:"\f17e";}
392 | .icon-foursquare:before{content:"\f180";}
393 | .icon-trello:before{content:"\f181";}
394 | .icon-female:before{content:"\f182";}
395 | .icon-male:before{content:"\f183";}
396 | .icon-gittip:before{content:"\f184";}
397 | .icon-sun:before{content:"\f185";}
398 | .icon-moon:before{content:"\f186";}
399 | .icon-archive:before{content:"\f187";}
400 | .icon-bug:before{content:"\f188";}
401 | .icon-vk:before{content:"\f189";}
402 | .icon-weibo:before{content:"\f18a";}
403 | .icon-renren:before{content:"\f18b";}
--------------------------------------------------------------------------------
/examples/css/jieyou.css:
--------------------------------------------------------------------------------
1 | .jumbotron .des{
2 | color: #fff;
3 | }
4 | pre.prettyprint{
5 | background-color: inherit;
6 | }
--------------------------------------------------------------------------------
/examples/disabled.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Lazy Load Disabled
7 |
23 |
24 |
25 |
lazyload Plugin for jQuery | Zepto
26 |
27 |
29 | This project is forked from tuupola/jquery_lazyload Zepto
35 |
36 | More information on jieyou/lazyload
38 |
39 |
40 |
43 |
44 |
Plugin disabled
45 |
46 | All images are loaded. Page takes long time to load. Shift-reload to test again.
47 | But wait there is more! You can also lazy load sideways or
48 | gazillion images .
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
Lazy Load Enabled
7 |
23 |
24 |
25 |
lazyload Plugin for jQuery | Zepto
26 |
27 |
29 | This project is forked from tuupola/jquery_lazyload Zepto
35 |
36 | More information on jieyou/lazyload
38 |
39 |
40 |
43 |
44 |
45 |
Plugin enabled
46 |
47 | Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down
48 | they are loaded when needed. Empty cache and shift-reload to test again. Compare this to page
49 | where plugin is disabled , same page with
50 | fadein effect , page with wide
51 | layout or wide content inside container .
52 |
53 |
54 |
$("img.lazy").lazyload();
55 |
<img class="lazy" data-original="img/example.jpg" width="765" height="574">
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
Lazy Load Enabled With AJAX Content
7 |
23 |
24 |
25 |
lazyload Plugin for jQuery | Zepto
26 |
27 |
29 | This project is forked from tuupola/jquery_lazyload Zepto
35 |
36 | More information on jieyou/lazyload
38 |
39 |
40 |
43 |
44 |
45 |
Plugin enabled with AJAX loaded content
46 |
47 | Images are loaded via AJAX(H) call after you click the container. Lazy Load
48 | is applied in the callback.
49 |
50 |
51 | $("#container").one("click", function() {
52 | $("#container").load("images.html", function(response, status, xhr) {
53 | $("img.lazy").lazyload();
54 | });
55 | });
56 |
<img class="lazy" data-original="img/example.jpg" width="765" height="574">
57 |
58 | On IE6, You can use the codes below,to solve problem that `imgs` have no height when just appended to the DOM tree.
59 |
60 |
61 | $("#container").one("click", function() {
62 | $("#container").load("images.html", function(response, status, xhr) {
63 | setTimeout(funtion(){
64 | $("img.lazy").lazyload();
65 | },0)
66 | });
67 | });
68 |
69 | Click me to load content...
70 |
71 |
72 |
Lazy Load Enabled
7 |
23 |
24 |
25 |
lazyload Plugin for jQuery | Zepto
26 |
27 |
29 | This project is forked from tuupola/jquery_lazyload Zepto
35 |
36 | More information on jieyou/lazyload
38 |
39 |
40 |
43 |
44 |
45 |
Enabled with an AMD loader (such as `requirejs`)
46 |
47 | Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down
48 | they are loaded when needed. Empty cache and shift-reload to test again. Compare this to page
49 | where plugin is disabled , same page with
50 | fadein effect , page with wide
51 | layout or wide content inside container .
52 |
53 |
54 |
55 | <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>
56 | <script>
57 | require.config({
58 | // baseUrl: 'js/lib',
59 | paths: {
60 | // the left side is the module ID,
61 | // the right side is the path to
62 | // the jQuery file, relative to baseUrl.
63 | // Also, the path should NOT include
64 | // the '.js' file extension. This example
65 | // is using jQuery 1.9.0 located at
66 | // js/lib/jquery-1.9.0.js, relative to
67 | // the HTML page.
68 | jquery: 'http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min'
69 | }
70 | });
71 | </script>
72 | <script>
73 | require(['jquery','../lazyload'],function($){
74 | $(".lazy").lazyload()
75 | })
76 | </script>
77 |
78 |
<img class="lazy" data-original="img/example.jpg" width="765" height="574">
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
Lazy Load Enabled With CSS Background Images
7 |
23 |
24 |
25 |
lazyload Plugin for jQuery | Zepto
26 |
27 |
29 | This project is forked from tuupola/jquery_lazyload Zepto
35 |
36 | More information on jieyou/lazyload
38 |
39 |
40 |
43 |
44 |
45 |
Plugin enabled on css background images with fadein effect
46 |
47 | Here be dragons.
48 |
49 |
50 | <div class="lazy" data-original="img/bmw_m1_hood.jpg" style="background-image: url('img/grey.gif'); width: 765px; height: 574px;"></div>
51 |
52 | $("div.lazy").lazyload({
53 | effect : "fadeIn"
54 | });
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
Lazy Load Enabled on Container
7 |
28 |
29 |
30 |
lazyload Plugin for jQuery | Zepto
31 |
32 |
34 | This project is forked from tuupola/jquery_lazyload Zepto
40 |
41 | More information on jieyou/lazyload
43 |
44 |
45 |
48 |
49 |
50 |
Plugin enabled on container
51 |
52 | Images below the visible area (the ones lower than container bottom) are not loaded. When scrolling down
53 | they are loaded when needed. Empty cache and shift-reload to test again. Compare this to page where plugin is
54 | disabled or same page with fadein effect .
55 |
56 |
57 | $("img.lazy").lazyload({
58 | effect : "fadeIn",
59 | container: $("#container")
60 | });
61 |
62 |
63 | #container {
64 | height: 600px;
65 | overflow: scroll;
66 | }
67 |
68 |
<img class="lazy" data-original="img/example.jpg" width="765" height="574">
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
Lazy Load Enabled With FadeIn Effect
7 |
23 |
24 |
25 |
lazyload Plugin for jQuery | Zepto
26 |
27 |
29 | This project is forked from tuupola/jquery_lazyload Zepto
35 |
36 | More information on jieyou/lazyload
38 |
39 |
40 |
43 |
44 |
45 |
Plugin enabled with fadein effect
46 |
47 | Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down
48 | they are loaded when needed. Images appear using fadeIn
49 | effect. Empty cache and shift-reload to test again. Compare this to page where plugin is
50 | without effects .
51 |
52 |
53 | $("img.lazy").lazyload({
54 | effect : "fadeIn"
55 | });
56 |
57 |
<img class="lazy" data-original="img/example.jpg" width="765" height="574">
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
Lazy Load Enabled With Gazillion Images
7 |
23 |
24 |
25 |
lazyload Plugin for jQuery | Zepto
26 |
27 |
29 | This project is forked from tuupola/jquery_lazyload Zepto
35 |
36 | More information on jieyou/lazyload
38 |
39 |
40 |
43 |
44 |
45 |
Plugin enabled with gazillion images
46 |
47 | When you have hundreds of images it is best to use James Padolseys scrollstop event .
48 | Compate this to page where plugin is disabled or page with
49 | larger images .
50 |
51 |
52 | Note: The scrollstop event is only available with jQuery (not available with Zepto).
53 |
54 |
55 |
<script src="jquery.scrollstop.js" type="text/javascript"></script>
56 |
<img class="lazy" data-original="img/example.jpg" width="80" height="120" alt="">
57 |
$("img.lazy").lazyload({
58 | event: "scrollstop"
59 | });
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
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 |
Lazy Load Enabled
7 |
32 |
33 |
34 |
lazyload Plugin for jQuery | Zepto
35 |
36 |
38 | This project is forked from tuupola/jquery_lazyload Zepto
44 |
45 | More information on jieyou/lazyload
47 |
48 |
49 |
52 |
53 |
54 |
Plugin enabled
55 |
56 | Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down
57 | they are loaded when needed. Empty cache and shift-reload to test again. Compare this to page
58 | where plugin is disabled , same page with
59 | fadein effect , page with wide
60 | layout or wide content inside container .
61 |
62 |
63 |
$("img.lazy").lazyload();
64 |
<img class="lazy" data-original="img/example.jpg" width="765" height="574">
65 |
66 |
67 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
Lazy Load Enabled
7 |
23 |
24 |
25 |
lazyload Plugin for jQuery | Zepto
26 |
27 |
29 | This project is forked from tuupola/jquery_lazyload Zepto
35 |
36 | More information on jieyou/lazyload
38 |
39 |
40 |
43 |
44 |
45 |
Plugin enabled width no fake img loader
46 |
47 | By default, when loading a image, we firtst create a Image object ( fake image ) which used to download the remote image to local, and then modify the `src` or `background-image` attribute to the real element which need the image. By doing this, the users feel like the images showing immediately or can use some dynamic effect such as `fadeIn` , rather than a slowly downloading.
48 |
49 |
50 | But if the image is returned by a dynamic interferce instead of a static file, the mechanism above may cause the image being loaded twice ( fake image object once, when setting the attribute `src` or `background-image` of the real element once more ), when this occurs, you can set the `no_fake_img_loader` parameter `true`, without the `fake image` mechanism to avoid this problem.
51 |
52 |
53 |
$("img.lazy").lazyload({
54 | no_fake_img_loader:true
55 | })
56 |
<img class="lazy" data-original="img/example.jpg" width="765" height="574">
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
Lazy Load Enabled With Noscript Fallback
7 |
27 |
28 |
29 |
lazyload Plugin for jQuery | Zepto
30 |
31 |
33 | This project is forked from tuupola/jquery_lazyload Zepto
39 |
40 | More information on jieyou/lazyload
42 |
43 |
44 |
47 |
48 |
49 |
Plugin enabled with noscript fallback
50 |
51 | This page deprecates gracefully for non JavaScript browsers. It requires hiding
52 | lazy loaded images with css and adding a <noscript> block which contains
53 | the real image and it is shown when JavaScript is not enabled. If JavaScript is enabled
54 | show() function is called before initializing Lazy Load plugin.
55 |
56 |
57 |
.lazy {
58 | display: none;
59 | }
60 |
61 |
$("img.lazy").show().lazyload({
62 | effect : "fadeIn"
63 | });
64 |
65 |
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="765" height="574">
66 | <noscript><img src="img/example.jpg" width="765" height="574"></noscript>
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
83 |
84 |
85 |
Lazy Load Enabled
7 |
23 |
24 |
25 |
lazyload Plugin for jQuery | Zepto
26 |
27 |
29 | This project is forked from tuupola/jquery_lazyload Zepto
35 |
36 | More information on jieyou/lazyload
38 |
39 |
40 |
43 |
44 |
45 |
Plugin enabled width `srcset`
46 |
47 | About `srcset` : video |w3c .
51 |
52 |
$("img.lazy").lazyload();
53 |
<img class="lazy" data-original="img/bmw_m1_hood.jpg" data-original-srcset="img/bmw_m1_hood.jpg 765w" sizes="765px" width="765" height="574">
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
Lazy Load Images After 5 Second Timeout
7 |
23 |
24 |
25 |
lazyload Plugin for jQuery | Zepto
26 |
27 |
29 | This project is forked from tuupola/jquery_lazyload Zepto
35 |
36 | More information on jieyou/lazyload
38 |
39 |
40 |
43 |
44 |
45 |
Load images after five second delay
46 |
47 | Here Lazy Load
48 | plugin is enabled. Images are not loaded. Timeout will trigger five seconds after
49 | all other elements of page have been loaded.
50 |
51 |
$(function() {
52 | $("img.lazy").lazyload({
53 | event : "sporty"
54 | });
55 | });
56 |
57 | $(window).bind("load", function() {
58 | var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000);
59 | });
60 |
61 |
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="765" height="574">
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
Lazy Load Enabled
7 |
23 |
24 |
25 |
lazyload Plugin for jQuery | Zepto
26 |
27 |
29 | This project is forked from tuupola/jquery_lazyload Zepto
35 |
36 | More information on jieyou/lazyload
38 |
39 |
40 |
43 |
44 |
45 |
Plugin enabled width rewrite image's original url
46 |
47 | Somethins, you need do something with the original url, See the example code below. We changed the first image's url to another.
48 |
49 |
50 |
$("img.lazy").lazyload({
51 | url_rewriter_fn:function($element,originalSrcInAttr){
52 | // this -> image element
53 | if(originalSrcInAttr == 'img/bmw_m1_hood.jpg'){ // in the example, we changed the first image's url to another
54 | return 'img/bmw_m1_hood_rewritten.jpg'
55 | }
56 | return originalSrcInAttr
57 | }
58 | });
59 |
<img class="lazy" data-original="img/example.jpg" width="765" height="574">
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
Lazy Load in page which can only scroll on vertical
7 |
27 |
28 |
29 |
lazyload Plugin for jQuery | Zepto
30 |
31 |
33 | This project is forked from tuupola/jquery_lazyload Zepto
39 |
40 | More information on jieyou/lazyload
42 |
43 |
44 |
47 |
48 |
49 |
Plugin enabled in page which can only scroll vertically.
50 |
51 | In most situations, page can only scroll vertically.
52 | At this time, only check images's vertical position will improve performance.
53 |
54 |
55 | This example page can scroll both vertically and horizontally, we set vertical_only to true, so it only check images's vertical position to decide whether appear or not.
56 | Shift-reload to test again. Compare this to page where plugin is
57 | disabled or
58 | wide page .
59 |
60 |
61 | You can only set vertical_only to true when page can only scroll vertically (not like this example).
62 |
63 |
$("img.lazy").lazyload({
64 | vertical_only: true
65 | });
66 |
<img class="lazy" data-original="img/example.jpg" width="765" height="574">
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
Lazy Load Enabled in wide page
7 |
27 |
28 |
29 |
lazyload Plugin for jQuery | Zepto
30 |
31 |
33 | This project is forked from tuupola/jquery_lazyload Zepto
39 |
40 | More information on jieyou/lazyload
42 |
43 |
44 |
47 |
48 |
49 |
Plugin enabled in wide page
50 |
51 | Images right of the fold are not loaded. When scrolling left they are loaded when needed.
52 | Shift-reload to test again. Compare this to page where plugin is
53 | disabled or page with
54 | gazillion images .
55 |
56 |
$("img.lazy").lazyload({
57 | effect: "fadeIn"
58 | });
59 |
<img class="lazy" data-original="img/example.jpg" width="765" height="574">
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
Lazy Load Enabled on Horizontal Container
7 |
32 |
33 |
34 |
lazyload Plugin for jQuery | Zepto
35 |
36 |
38 | This project is forked from tuupola/jquery_lazyload Zepto
44 |
45 | More information on jieyou/lazyload
47 |
48 |
49 |
52 |
53 |
54 |
Plugin enabled on horizontal container
55 |
56 | Images right of the visible area are not loaded. When scrolling left they are loaded when needed.
57 | Shift-reload to test again. Compare this to page where plugin is
58 | disabled or page with
59 | gazillion images .
60 |
61 |
$("img.lazy").lazyload({
62 | container: $("#container")
63 | });
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
2 |
3 |
4 | Lazy Load Enabled
7 |
23 |
24 |
25 |
lazyload Plugin for jQuery | Zepto
26 |
27 |
29 | This project is forked from tuupola/jquery_lazyload Zepto
35 |
36 | More information on jieyou/lazyload
38 |
39 |
40 |
43 |
44 |
45 |
Plugin enabled
46 |
47 | Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down
48 | they are loaded when needed. Empty cache and shift-reload to test again. Compare this to page
49 | where plugin is disabled , same page with
50 | fadein effect , page with wide
51 | layout or wide content inside container .
52 |
53 |
54 |
$("img.lazy").lazyload();
55 |
<img class="lazy" data-original="img/example.jpg" width="765" height="574">
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
show
65 |
66 |
67 |
41 |
42 |
43 |
46 | 
69 | 
70 | 
71 | 
72 | 
73 | 
74 |
75 |