diff --git a/README.md b/README.md index d770ec7..1ffea20 100644 --- 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 - **Copyright**: 2021 AppSeeds - **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 | [function](#function) | | The function that will be deferred. | | [delay] | number | 0 | 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 [Defer](#Defer) -**Access**: public -**Since**: 2.0 +**Kind**: static method of [Defer](#Defer) +**Access**: public +**Since**: 2.0 | Param | Type | Default | Description | | --- | --- | --- | --- | | [selector] | string | "[type=deferjs]" | 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: ``` -**Example** +**Example** If you don't want the ` ``` -**Kind**: static method of [Defer](#Defer) -**Access**: public -**Since**: 2.0 +**Kind**: static method of [Defer](#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] | [closure](#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] | object | | [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 `` tags which have CSS class `lazy`. @@ -370,7 +370,7 @@ Lazy load all `` tags which have CSS class `lazy`. Photo 2 Photo 3 ``` -**Example** +**Example** Basic usage: Lazy load background image of a `div` tag. @@ -394,7 +394,7 @@ Lazy load background image of a `div` tag. ``` -**Example** +**Example** Advanced usage: Delay lazy loading `` 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. Photo 2 Photo 3 ``` -**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 Photo 2 Photo 3 ``` -**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. Photo 2 Photo 3 ``` -**Example** +**Example** This function can be used similarly for other tags such as `