Updated version

shinsenter · Mar 12, 2021 · c3d6425 · c3d6425
1 parent edf2df8
commit c3d6425
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 142 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@
 [![NPM](https://nodei.co/npm/@shinsenter/defer.js.png?downloads=true)](https://www.npmjs.com/package/@shinsenter/defer.js)
 
 - **Package**: [@shinsenter/defer.js](https://www.npmjs.com/package/@shinsenter/defer.js)
-- **Version**: 2.0
+- **Version**: 2.1.0
 - **Author**: Mai Nhut Tan <[email protected]>
 - **Copyright**: 2021 AppSeeds <https://code.shin.company/>
 - **License**: [MIT](https://raw.githubusercontent.com/shinsenter/defer.js/master/LICENSE)
@@ -162,16 +162,16 @@ which may adversely affect the loading of your web page.
 All JavaScript delayed by `Defer()` will only executed
 after the web page has completely loaded.
 
-**Kind**: global function
-**Access**: public
-**Since**: 2.0
+**Kind**: global function  
+**Access**: public  
+**Since**: 2.0  
 
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
 | func | [<code>function</code>](#function) |  | The function that will be deferred. |
 | [delay] | <code>number</code> | <code>0</code> | The duration in miliseconds to delay the `func` function. |
 
-**Example**
+**Example**  
 Delay some heavy DOM manipulations in JavaScript.
 
 ```js
@@ -181,7 +181,7 @@ Defer(function() {
   jQuery('div').hide().fadeIn().show();
 }); // <- script runs after the page has completely loaded
 ```
-**Example**
+**Example**  
 Delay the same JavaScript as above for 3000ms.
 
 ```js
@@ -212,15 +212,15 @@ as soon as the page has completely loaded.
 This function is useful when you don't want heavy JavaScript works
 to affect your website loading speed.
 
-**Kind**: static method of [<code>Defer</code>](#Defer)
-**Access**: public
-**Since**: 2.0
+**Kind**: static method of [<code>Defer</code>](#Defer)  
+**Access**: public  
+**Since**: 2.0  
 
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
 | [selector] | <code>string</code> | <code>&quot;[type&#x3D;deferjs]&quot;</code> | A CSS selector that queries script tags will be deferred. |
 
-**Example**
+**Example**  
 You just need to simply change `type="text/javascript"` to `type="deferjs"`,
 or add `type="deferjs"` to your script tag for it to take effect.
 
@@ -234,7 +234,7 @@ After:
 <script type="deferjs" src="heavy-library.js"></script>
 <script type="deferjs">// heavy script here </script>
 ```
-**Example**
+**Example**  
 If you don't want the `<script type="deferjs">` syntax,
 or you want to define another name for website,
 please call `Defer.all()` manually at the bottom of the `<body>` tag.
@@ -259,9 +259,9 @@ This function is useful when you don't want heavy JavaScript
 (especially the widgets of social networks, ad services)
 to affect your website loading speed.
 
-**Kind**: static method of [<code>Defer</code>](#Defer)
-**Access**: public
-**Since**: 2.0
+**Kind**: static method of [<code>Defer</code>](#Defer)  
+**Access**: public  
+**Since**: 2.0  
 
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -270,13 +270,13 @@ to affect your website loading speed.
 | [delay] | <code>number</code> | <code>0</code> | The duration in miliseconds to delay loading the js file. |
 | [callback] | [<code>closure</code>](#closure) |  | The callback function will be executed if the js file is successfully loaded. |
 
-**Example**
+**Example**  
 Delay loading of Facebook SDK after 3000ms.
 
 ```js
 Defer.js('https://connect.facebook.net/en_US/sdk.js', 'fb-sdk', 3000);
 ```
-**Example**
+**Example**  
 Delay loading of AddThis SDK after 5000ms.
 
 ```js
@@ -294,9 +294,9 @@ For lazy loading external CSS files.
 This function is useful when you don't want heavy CSS
 (like Web Fonts) to affect your website loading speed.
 
-**Kind**: static method of [<code>Defer</code>](#Defer)
-**Access**: public
-**Since**: 2.0
+**Kind**: static method of [<code>Defer</code>](#Defer)  
+**Access**: public  
+**Since**: 2.0  
 
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -305,13 +305,13 @@ This function is useful when you don't want heavy CSS
 | [delay] | <code>number</code> | <code>0</code> | The duration in miliseconds to delay loading the css file. |
 | [callback] | [<code>closure</code>](#closure) |  | The callback function will be executed if the css file is successfully loaded. |
 
-**Example**
+**Example**  
 Lazy load FontAwesome Webfont from its CDN.
 
 ```js
 Defer.css('https://pro.fontawesome.com/releases/v5.10.0/css/all.css', 'fa5-css');
 ```
-**Example**
+**Example**  
 Delay loading animate.css from CDN for 1000ms.
 
 ```js
@@ -345,9 +345,9 @@ right after the `defer.min.js` script tag as following example:
 <script>'IntersectionObserver'in window||document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"><\/script>');</script>
 ```
 
-**Kind**: static method of [<code>Defer</code>](#Defer)
-**Access**: public
-**Since**: 2.0
+**Kind**: static method of [<code>Defer</code>](#Defer)  
+**Access**: public  
+**Since**: 2.0  
 
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -357,7 +357,7 @@ right after the `defer.min.js` script tag as following example:
 | [validate] | [<code>closure</code>](#closure) |  | A function will be executed with element will be lazy loaded as its argument. If the function returns `false`, lazy loading for that element will be skipped. |
 | [observeOptions] | <code>object</code> |  | [Intersection observer options](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) |
 
-**Example**
+**Example**  
 Basic usage:
 Lazy load all `<img>` tags which have CSS class `lazy`.
 
@@ -370,7 +370,7 @@ Lazy load all `<img>` tags which have CSS class `lazy`.
 <img class="lazy" alt="Photo 2" data-src="https://picsum.photos/200/300?random=2" width="200" height="300" />
 <img class="lazy" alt="Photo 3" data-src="https://picsum.photos/200/300?random=3" width="200" height="300" />
 ```
-**Example**
+**Example**  
 Basic usage:
 Lazy load background image of a `div` tag.
 
@@ -394,7 +394,7 @@ Lazy load background image of a `div` tag.
   <!-- The content -->
 </div>
 ```
-**Example**
+**Example**  
 Advanced usage:
 Delay lazy loading `<img>` tags 200ms after the page has completely loaded.
 Then it will add a CSS class `loaded` to the fully lazy loaded image element.
@@ -408,7 +408,7 @@ Then it will add a CSS class `loaded` to the fully lazy loaded image element.
 <img class="lazy-extra" alt="Photo 2" data-src="https://picsum.photos/200/300?random=5" width="200" height="300" />
 <img class="lazy-extra" alt="Photo 3" data-src="https://picsum.photos/200/300?random=6" width="200" height="300" />
 ```
-**Example**
+**Example**  
 Advanced usage: Lazy load with [Intersection observer options](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options)
 
 ```html
@@ -425,7 +425,7 @@ Advanced usage: Lazy load with [Intersection observer options](https://developer
 <img class="lazy-sooner" alt="Photo 2" data-src="https://picsum.photos/200/300?random=8" width="200" height="300" />
 <img class="lazy-sooner" alt="Photo 3" data-src="https://picsum.photos/200/300?random=9" width="200" height="300" />
 ```
-**Example**
+**Example**  
 We can use CSS class that added to the lazy loaded element
 to add animation to the successfully loaded elements.
 
@@ -448,7 +448,7 @@ to add animation to the successfully loaded elements.
 <img class="fade" alt="Photo 2" data-src="https://picsum.photos/200/300?random=11" width="200" height="300" />
 <img class="fade" alt="Photo 3" data-src="https://picsum.photos/200/300?random=12" width="200" height="300" />
 ```
-**Example**
+**Example**  
 This function can be used similarly for other tags
 such as `<iframe>`, `<video>`, `<audio>`, `<picture>` tags.
 
@@ -484,7 +484,7 @@ such as `<iframe>`, `<video>`, `<audio>`, `<picture>` tags.
   Your browser does not support the video tag.
 </video>
 ```
-**Example**
+**Example**  
 Or even execute a piece of JavaScript
 when the user scrolls to the element `#scroll_reveal`.
 
@@ -502,7 +502,7 @@ when the user scrolls to the element `#scroll_reveal`.
   This is my content.
 </div>
 ```
-**Example**
+**Example**  
 Combine with other Defer functions.
 Delay loading highlightjs library for 1000ms.
 Then when you scroll to any `code` tag, enable code highlighting for it.
@@ -524,15 +524,15 @@ Defer.js(base + '/highlight.pack.min.js', 'hljs-js', 1000, function () {
 ### Defer.reveal(element) ⇒ <code>void</code>
 Reveal an element which is lazyloaded by the library
 
-**Kind**: static method of [<code>Defer</code>](#Defer)
-**Access**: public
-**Since**: 2.1
+**Kind**: static method of [<code>Defer</code>](#Defer)  
+**Access**: public  
+**Since**: 2.1  
 
 | Param | Type | Description |
 | --- | --- | --- |
 | element | [<code>Node</code>](#Node) | The DOM [Node](#Node) element |
 
-**Example**
+**Example**  
 ```js
 // Show single element
 var node = document.getElementById('my-video');
@@ -551,15 +551,15 @@ document.querySelectorAll('.multi-lazy').forEach(function(node) {
 ## ~~defer(func, [delay])~~
 ***Deprecated***
 
-**Kind**: global function
-**Access**: public
-**See**: [Defer](#Defer)
-**Since**: 1.0
+**Kind**: global function  
+**Access**: public  
+**See**: [Defer](#Defer)  
+**Since**: 1.0  
 
 | Param | Type |
 | --- | --- |
-| func | [<code>function</code>](#function) |
-| [delay] | <code>number</code> |
+| func | [<code>function</code>](#function) | 
+| [delay] | <code>number</code> | 
 
 
 * * *
@@ -569,17 +569,17 @@ document.querySelectorAll('.multi-lazy').forEach(function(node) {
 ## ~~deferscript(src, [id], [delay], [callback])~~
 ***Deprecated***
 
-**Kind**: global function
-**Access**: public
-**See**: [js](#Defer.js)
-**Since**: 1.0
+**Kind**: global function  
+**Access**: public  
+**See**: [js](#Defer.js)  
+**Since**: 1.0  
 
 | Param | Type |
 | --- | --- |
-| src | <code>string</code> |
-| [id] | <code>string</code> |
-| [delay] | <code>number</code> |
-| [callback] | <code>callback</code> |
+| src | <code>string</code> | 
+| [id] | <code>string</code> | 
+| [delay] | <code>number</code> | 
+| [callback] | <code>callback</code> | 
 
 
 * * *
@@ -589,17 +589,17 @@ document.querySelectorAll('.multi-lazy').forEach(function(node) {
 ## ~~deferstyle(src, [id], [delay], [callback])~~
 ***Deprecated***
 
-**Kind**: global function
-**Access**: public
-**See**: [css](#Defer.css)
-**Since**: 1.0
+**Kind**: global function  
+**Access**: public  
+**See**: [css](#Defer.css)  
+**Since**: 1.0  
 
 | Param | Type |
 | --- | --- |
-| src | <code>string</code> |
-| [id] | <code>string</code> |
-| [delay] | <code>number</code> |
-| [callback] | <code>callback</code> |
+| src | <code>string</code> | 
+| [id] | <code>string</code> | 
+| [delay] | <code>number</code> | 
+| [callback] | <code>callback</code> | 
 
 
 * * *
@@ -609,18 +609,18 @@ document.querySelectorAll('.multi-lazy').forEach(function(node) {
 ## ~~deferimg([selector], [delay], [cssclass], [validate], [observeOptions])~~
 ***Deprecated***
 
-**Kind**: global function
-**Access**: public
-**See**: [dom](#Defer.dom)
-**Since**: 1.0
+**Kind**: global function  
+**Access**: public  
+**See**: [dom](#Defer.dom)  
+**Since**: 1.0  
 
 | Param | Type |
 | --- | --- |
-| [selector] | <code>string</code> |
-| [delay] | <code>number</code> |
-| [cssclass] | <code>string</code> |
-| [validate] | <code>callback</code> |
-| [observeOptions] | <code>object</code> |
+| [selector] | <code>string</code> | 
+| [delay] | <code>number</code> | 
+| [cssclass] | <code>string</code> | 
+| [validate] | <code>callback</code> | 
+| [observeOptions] | <code>object</code> | 
 
 
 * * *
@@ -631,7 +631,7 @@ document.querySelectorAll('.multi-lazy').forEach(function(node) {
 A definition for an ordinary function,
 used as a parameter to another function.
 
-**Kind**: global typedef
+**Kind**: global typedef  
 
 * * *
 
@@ -640,7 +640,7 @@ used as a parameter to another function.
 ## closure ⇒ <code>void</code> \| <code>bool</code>
 The definition for a function that takes one parameter is a DOM [Node](#Node) element
 
-**Kind**: global typedef
+**Kind**: global typedef  
 
 | Param | Type | Description |
 | --- | --- | --- |
@@ -654,8 +654,8 @@ The definition for a function that takes one parameter is a DOM [Node](#Node) el
 ## Node
 The DOM Node interface
 
-**Kind**: global typedef
-**See**: [https://developer.mozilla.org/en-US/docs/Web/API/Node](https://developer.mozilla.org/en-US/docs/Web/API/Node)
+**Kind**: global typedef  
+**See**: [https://developer.mozilla.org/en-US/docs/Web/API/Node](https://developer.mozilla.org/en-US/docs/Web/API/Node)  
 
 * * *
 

diff --git a/docs/about.md b/docs/about.md
@@ -16,7 +16,7 @@
 [![NPM](https://nodei.co/npm/@shinsenter/defer.js.png?downloads=true)](https://www.npmjs.com/package/@shinsenter/defer.js)
 
 - **Package**: [@shinsenter/defer.js](https://www.npmjs.com/package/@shinsenter/defer.js)
-- **Version**: 2.0
+- **Version**: 2.1.0
 - **Author**: Mai Nhut Tan <[email protected]>
 - **Copyright**: 2021 AppSeeds <https://code.shin.company/>
 - **License**: [MIT](https://raw.githubusercontent.com/shinsenter/defer.js/master/LICENSE)