Skip to content

Commit

Permalink
Updated version
Browse files Browse the repository at this point in the history
  • Loading branch information
@shinsenter
shinsenter committed Mar 12, 2021
1 parent edf2df8 commit c3d6425
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 142 deletions.
142 changes: 71 additions & 71 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 <shin@shin.company>
- **Copyright**: 2021 AppSeeds <https://code.shin.company/>
- **License**: [MIT](https://raw.githubusercontent.com/shinsenter/defer.js/master/LICENSE)
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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.

Expand All @@ -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.
Expand All @@ -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 |
| --- | --- | --- | --- |
Expand All @@ -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
Expand All @@ -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 |
| --- | --- | --- | --- |
Expand All @@ -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
Expand Down Expand Up @@ -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 |
| --- | --- | --- | --- |
Expand All @@ -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`.

Expand All @@ -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.

Expand All @@ -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.
Expand All @@ -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
Expand All @@ -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.

Expand All @@ -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.

Expand Down Expand Up @@ -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`.

Expand All @@ -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.
Expand All @@ -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');
Expand All @@ -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> |


* * *
Expand All @@ -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> |


* * *
Expand All @@ -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> |


* * *
Expand All @@ -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> |


* * *
Expand All @@ -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

* * *

Expand All @@ -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 |
| --- | --- | --- |
Expand All @@ -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)

* * *

Expand Down
2 changes: 1 addition & 1 deletion docs/about.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 <shin@shin.company>
- **Copyright**: 2021 AppSeeds <https://code.shin.company/>
- **License**: [MIT](https://raw.githubusercontent.com/shinsenter/defer.js/master/LICENSE)
Expand Down
Loading

0 comments on commit c3d6425

Please sign in to comment.