@@ -356,7 +356,7 @@ It's possible to use a lot of animation effects (like bounce, flip, rotate, etc.
356
356
357
357
``` javascript
358
358
/* JS */
359
- $ .lazyLoadXT .onload .addClass = ' animated bounceOutLeft' ) ;
359
+ $ .lazyLoadXT .onload .addClass = ' animated bounceOutLeft' ;
360
360
```
361
361
362
362
Demo: http://ressio.github.io/lazy-load-xt/demo/animatecss.htm
@@ -376,6 +376,7 @@ make lazy loading of images in horizontal scroller. Let's assume that your html
376
376
```
377
377
with following CSS rules to make ` .wrapper ` scrollable in horizontal direction and images to be alined:
378
378
``` css
379
+ /* CSS */
379
380
.wrapper {
380
381
overflow-x : scroll ;
381
382
overflow-y : hidden ;
@@ -392,6 +393,7 @@ Then all that you need is to proxy `scroll` event from `.wrapper` element to `wi
392
393
bubbled automatically] ( http://www.w3.org/TR/2009/WD-DOM-Level-3-Events-20090908/#event-type-scroll ) . It may be easily
393
394
done using ` scrollContainer ` option:
394
395
``` javascript
396
+ /* JS */
395
397
$ .lazyLoadXT .scrollContainer = ' .wrapper' ;
396
398
```
397
399
@@ -406,11 +408,8 @@ Using Lazy Load XT it is easily to get "infinite scroll" effect. Just put a mark
406
408
```
407
409
and load next part of elements in ` lazyshow ` handler, e.g.:
408
410
``` javascript
409
- ```
410
- ``` javascript
411
+ /* JS */
411
412
$ (document ).ready (function () {
412
- ` ` `
413
- ` ` ` javascript
414
413
$ (' #marker' ).on (' lazyshow' , function () {
415
414
$ .ajax ({... }).done (function (responseText ) {
416
415
// add new elements:
@@ -490,14 +489,14 @@ Support of video elements in extra version of Lazy Load XT is just an addon that
490
489
the script. That is loading of
491
490
492
491
``` html
493
- <script src =" jquery.lazyloadxt.extra.js" >
492
+ <script src =" jquery.lazyloadxt.extra.js" ></ script >
494
493
```
495
494
496
495
is identical to loading of
497
496
498
497
``` html
499
- < script src= " jquery.lazyloadxt.js" >
500
- < script src= " jquery.lazyloadxt.video.js" >
498
+ <script src =" jquery.lazyloadxt.js" ></ script >
499
+ <script src =" jquery.lazyloadxt.video.js" ></ script >
501
500
```
502
501
503
502
Options
@@ -520,8 +519,8 @@ tag. Format of responsive images description is based on
520
519
[ srcset attribute] ( http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ ) draft of HTML extension for adaptive images:
521
520
522
521
``` html
523
- < script src= " jquery.lazyloadxt.js" >
524
- < script src= " jquery.lazyloadxt.srcset.js" >
522
+ <script src =" jquery.lazyloadxt.js" ></ script >
523
+ <script src =" jquery.lazyloadxt.srcset.js" ></ script >
525
524
```
526
525
527
526
``` html
@@ -599,7 +598,7 @@ widgets for different social medias (like Twitter, Facebook, Google+, etc.). If
599
598
using ` <iframe> ` tag, you can use "extra" version of Lazy Load XT to make it lazy loaded:
600
599
601
600
``` html
602
- <script src =" jquery.lazyloadxt.extra.js" >
601
+ <script src =" jquery.lazyloadxt.extra.js" ></ script >
603
602
```
604
603
605
604
``` html
@@ -617,8 +616,8 @@ The code should wrapped in html comment inside a `div` with assigned `id` attrib
617
616
618
617
619
618
``` html
620
- < script src= " jquery.lazyloadxt.js" >
621
- < script src= " jquery.lazyloadxt.widget.js" >
619
+ <script src =" jquery.lazyloadxt.js" ></ script >
620
+ <script src =" jquery.lazyloadxt.widget.js" ></ script >
622
621
```
623
622
624
623
``` html
@@ -662,8 +661,8 @@ Print Preview before actual print (as they don't wait until images will be loade
662
661
15.0 release (Presto didn't support both ` beforeprint ` event and matchMedia listeners).
663
662
664
663
``` html
665
- <script src =" jquery.lazyloadxt.js" >
666
- < script src= " jquery.lazyloadxt.print.js" >
664
+ <script src =" jquery.lazyloadxt.js" ></ script >
665
+ <script src =" jquery.lazyloadxt.print.js" ></ script >
667
666
```
668
667
669
668
Demo: http://ressio.github.io/lazy-load-xt/demo/print.htm
@@ -674,8 +673,8 @@ Demo: http://ressio.github.io/lazy-load-xt/demo/print.htm
674
673
This addon allows you to use lazy-loading technique for background images of any tag.
675
674
676
675
``` html
677
- < script src= " jquery.lazyloadxt.js" >
678
- < script src= " jquery.lazyloadxt.bg.js" >
676
+ <script src =" jquery.lazyloadxt.js" ></ script >
677
+ <script src =" jquery.lazyloadxt.bg.js" ></ script >
679
678
```
680
679
681
680
``` html
@@ -700,8 +699,8 @@ disabled JavaScript. As an alternative way, `jquery.lazyloadxt.script.js` addon
700
699
` <script> ` in the following form (without duplicating and renaming ` src ` to ` data-src ` ):
701
700
702
701
``` html
703
- < script src= " jquery.lazyloadxt.js" >
704
- < script src= " jquery.lazyloadxt.script.js" >
702
+ <script src =" jquery.lazyloadxt.js" ></ script >
703
+ <script src =" jquery.lazyloadxt.script.js" ></ script >
705
704
```
706
705
707
706
``` html
@@ -739,8 +738,8 @@ This is very simple addon (just few lines of code) that loads all images after s
739
738
doesn't affect loading of CSSes and JavaScripts, and time to initial website rendering will be decreased.
740
739
741
740
```html
742
- <script src =" jquery.lazyloadxt.js" >
743
- < script src= " jquery.lazyloadxt.autoload.js" >
741
+ <script src =" jquery.lazyloadxt.js" ></ script >
742
+ <script src =" jquery.lazyloadxt.autoload.js" ></ script >
744
743
```
745
744
746
745
Options:
@@ -792,11 +791,11 @@ function addLazyLoading($html) {
792
791
793
792
Lazy Load XT may be loaded from [jsDelivr CDN](http://www.jsdelivr.com/#!jquery.lazyloadxt)
794
793
```html
795
- < script src= " //cdn.jsdelivr.net/jquery.lazyloadxt/1.0.0/jquery.lazyloadxt.min.js" >
794
+ <script src="//cdn.jsdelivr.net/jquery.lazyloadxt/1.0.0/jquery.lazyloadxt.min.js"></script>
796
795
```
797
796
or [CDNJS CDN](http://cdnjs.com/libraries/jquery.lazyloadxt/)
798
797
```html
799
- < script src= " //cdnjs.cloudflare.com/ajax/libs/jquery.lazyloadxt/1.0.0/jquery.lazyloadxt.min.js" >
798
+ <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyloadxt/1.0.0/jquery.lazyloadxt.min.js"></script>
800
799
```
801
800
802
801
Note that any of Lazy Load XT `dist` files may be loaded from CDN, not only `jquery.lazyloadxt.min.js`.
0 commit comments