Skip to content

Commit

Permalink
For 3.7.0 (#130)
Browse files Browse the repository at this point in the history
  • Loading branch information
@shinsenter
shinsenter committed Mar 7, 2024
1 parent 2e15959 commit a0e1c0a
Show file tree
Hide file tree
Showing 13 changed files with 309 additions and 406 deletions.
6 changes: 3 additions & 3 deletions .build/.eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 3
"ecmaVersion": 5
},
"rules": {
"accessor-pairs": "error",
Expand Down Expand Up @@ -52,7 +52,7 @@
"function-paren-newline": "error",
"generator-star-spacing": "error",
"global-require": "error",
"guard-for-in": "error",
"guard-for-in": "off",
"handle-callback-err": "error",
"id-blacklist": "error",
"id-length": "off",
Expand Down Expand Up @@ -191,7 +191,7 @@
"object-curly-newline": "error",
"object-curly-spacing": "error",
"object-property-newline": "error",
"object-shorthand": "error",
"object-shorthand": "off",
"one-var": "off",
"one-var-declaration-per-line": "error",
"operator-assignment": "error",
Expand Down
83 changes: 31 additions & 52 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ By using Defer.js, you can say goodbye to these issues! With its lazy loading ca
[![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**: 3.6.0
- **Version**: 3.7.0
- **Author**: Mai Nhut Tan <shin@shin.company>
- **Copyright**: 2019-2023 SHIN Company <https://code.shin.company/>
- **License**: [MIT](https://code.shin.company/defer.js/blob/master/LICENSE)
Expand Down Expand Up @@ -95,15 +95,15 @@ Add the Defer.js library to your page by including a `<script>` tag just below t
<title>My Awesome Page</title>

<!-- Add Defer.js here -->
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.6.0/dist/defer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.7.0/dist/defer.min.js"></script>

<!-- ... -->
</head>
```

### Inlining the library

To save an HTTP request, you can even inline the entire Defer.js library by copying its content from the [defer.min.js](https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.6.0/dist/defer.min.js) and replacing the comments in the script tag with its content.
To save an HTTP request, you can even inline the entire Defer.js library by copying its content from the [defer.min.js](https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.7.0/dist/defer.min.js) and replacing the comments in the script tag with its content.

```html
<head>
Expand All @@ -127,7 +127,7 @@ If you're using an older version of Defer.js, you can use `defer_plus.min.js` in
<title>My Awesome Page</title>

<!-- Put defer_plus.min.js here -->
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.6.0/dist/defer_plus.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.7.0/dist/defer_plus.min.js"></script>

<!-- ... -->
</head>
Expand All @@ -141,7 +141,7 @@ To enhance performance for legacy browsers that don't support the `IntersectionO
<script>/* Defer.js content */</script>

<!-- Add the IntersectionObserver Polyfill for legacy browsers -->
<script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.6.0/dist/polyfill.min.js"><\/script>');</script>
<script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.7.0/dist/polyfill.min.js"><\/script>');</script>
```

*NOTE*: Modern browsers support the `IntersectionObserver` feature, so you don't have to worry about adding the polyfill if you don't have legacy browsers in mind.
Expand All @@ -154,8 +154,8 @@ To enhance performance for legacy browsers that don't support the `IntersectionO
* [.lazy](#Defer.lazy) : <code>boolean</code>
* [.all([selector], [delay], [waitForUserAction])](#Defer.all) ⇒ <code>void</code>
* [.dom([selector], [delay], [unveiledClass], [resolver], [observeOptions])](#Defer.dom) ⇒ <code>void</code>
* [.css(fileUrl, [id], [delay], [onload], [waitForUserAction])](#Defer.css) ⇒ <code>void</code>
* [.js(fileUrl, [id], [delay], [onload], [waitForUserAction])](#Defer.js) ⇒ <code>void</code>
* [.css(fileUrl, [id_or_attributes], [delay], [onload], [waitForUserAction])](#Defer.css) ⇒ <code>void</code>
* [.js(fileUrl, [id_or_attributes], [delay], [onload], [waitForUserAction])](#Defer.js) ⇒ <code>void</code>
* [.reveal(node, [unveiledClass])](#Defer.reveal) ⇒ <code>void</code>
* ~~[defer(func, [delay])](#defer)~~
* ~~[deferimg([selector], [delay], [unveiledClass], [resolver], [observeOptions])](#deferimg)~~
Expand All @@ -181,7 +181,7 @@ Wrapping your script with `Defer()` may help your website prevent render-blockin
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| func | <code>function</code> | | A function to be executed after page fully loaded. |
| [delay] | <code>number</code> | <code>0</code> | The time, in milliseconds that it should wait before the function is executed. |
| [delay] | <code>number</code> | <code>0</code> | A timespan, in milliseconds, that the page should wait before the function is executed. |
| [waitForUserAction] | <code>boolean</code> | <code>false</code> | This argument tells `Defer()` to delay the execution and wait until there is a user interaction. |

**Example**
Expand Down Expand Up @@ -214,7 +214,7 @@ and wait until the user starts interacting with your page.
```html
<style>
body.moving {
background: linear-gradient(270deg, #ffffff, #e8f0c3, #ccf0c3);
background: linear-gradient(270deg, #c2fff5, #eec3f0, #a1c1ff);
background-size: 600% 600%;
animation: moving_bg 30s ease infinite;
}
Expand All @@ -235,8 +235,8 @@ and wait until the user starts interacting with your page.
* [.lazy](#Defer.lazy) : <code>boolean</code>
* [.all([selector], [delay], [waitForUserAction])](#Defer.all) ⇒ <code>void</code>
* [.dom([selector], [delay], [unveiledClass], [resolver], [observeOptions])](#Defer.dom) ⇒ <code>void</code>
* [.css(fileUrl, [id], [delay], [onload], [waitForUserAction])](#Defer.css) ⇒ <code>void</code>
* [.js(fileUrl, [id], [delay], [onload], [waitForUserAction])](#Defer.js) ⇒ <code>void</code>
* [.css(fileUrl, [id_or_attributes], [delay], [onload], [waitForUserAction])](#Defer.css) ⇒ <code>void</code>
* [.js(fileUrl, [id_or_attributes], [delay], [onload], [waitForUserAction])](#Defer.js) ⇒ <code>void</code>
* [.reveal(node, [unveiledClass])](#Defer.reveal) ⇒ <code>void</code>


Expand Down Expand Up @@ -305,7 +305,7 @@ View the discussion [#122](https://code.shin.company/defer.js/discussions/122) f
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| [selector] | <code>string</code> | <code>&quot;[type&#x3D;deferjs]&quot;</code> | A CSS selector selects target script tags that will be Lazy loaded. |
| [delay] | <code>number</code> | <code>0</code> | The time, in milliseconds that it should wait before a script tag is executed. |
| [delay] | <code>number</code> | <code>0</code> | A timespan, in milliseconds, that the page should wait before a script tag is executed. |
| [waitForUserAction] | <code>boolean</code> | <code>false</code> | This argument tells the `Defer.all()` method to delay the execution of scripts until there is a user interaction. |

**Example**
Expand Down Expand Up @@ -409,7 +409,7 @@ Please check out the below examples for more details.
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| [selector] | <code>string</code> | <code>&quot;[data-src]&quot;</code> | A CSS selector selects target HTML elements that will be unveiled later. |
| [delay] | <code>number</code> | <code>0</code> | The time, in milliseconds that it should wait before lazy loading is applied for target elements. |
| [delay] | <code>number</code> | <code>0</code> | A timespan, in milliseconds, that the page should wait before lazy loading is applied for target elements. |
| [unveiledClass] | <code>string</code> | | Class names that will be added to target elements when they are unveiled. |
| [resolver] | [<code>NodeHandler</code>](#NodeHandler) | | A [NodeHandler](#NodeHandler) will check a [Node](#Node) to determine if it will be unveiled or not. If the `resolver()` callback returns `false`, the node will not be unveiled. |
| [observeOptions] | <code>object</code> | | [Intersection observer options](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) |
Expand Down Expand Up @@ -634,12 +634,12 @@ This example uses the `Defer.dom()` method to defer a load of a Youtube iframe.

```html
<div id="demo-youtube">
<iframe title="The new MacBook Air"
<iframe title="Understanding performance with Core Web Vitals"
width="480" height="270" frameborder="0" allowfullscreen=""
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
src="about:blank"
data-src="https://www.youtube.com/embed/jwmS1gc9S5A"
data-style="background: transparent url(https://img.youtube.com/vi/jwmS1gc9S5A/hqdefault.jpg) 50% 50% / cover no-repeat;">
data-src="https://www.youtube.com/embed/F0NYT7DIlDQ"
data-style="background: transparent url(https://img.youtube.com/vi/F0NYT7DIlDQ/hqdefault.jpg) 50% 50% / cover no-repeat;">
</iframe>
</div>

Expand Down Expand Up @@ -703,7 +703,7 @@ he/she will see a message as soon as an element with `id="surprise-me"` appears.

<a name="Defer.css"></a>

### Defer.css(fileUrl, [id], [delay], [onload], [waitForUserAction]) ⇒ <code>void</code>
### Defer.css(fileUrl, [id_or_attributes], [delay], [onload], [waitForUserAction]) ⇒ <code>void</code>
We use the `Defer.css()` method to defer a load
of external CSS files without blocking the page rendering.

Expand All @@ -715,10 +715,10 @@ The `fileUrl` will not be fetched unless the user starts interacting with your p

| Param | Type | Default | Description |
| --- | --- | --- | --- |
| fileUrl | <code>string</code> | | URL to the CSS file that should be lazy loaded. |
| [id] | <code>string</code> | | The ID will be assigned to the script tag to avoid downloading the same file multiple times. |
| [delay] | <code>number</code> | <code>0</code> | The time, in milliseconds that the page should wait before the CSS file is fetched. |
| [onload] | <code>function</code> | | The callback function will be executed if the CSS file is successfully loaded. |
| fileUrl | <code>string</code> | | The URL to the CSS file that should be lazy loaded. |
| [id_or_attributes] | <code>string</code> \| <code>object</code> | | An ID string or an attribute object for the link tag that should be added to the page. |
| [delay] | <code>number</code> | <code>0</code> | A timespan, in milliseconds, that the page should wait before the CSS file is fetched. |
| [onload] | <code>function</code> | | A callback function will be executed if the CSS file is successfully loaded. |
| [waitForUserAction] | <code>boolean</code> | <code>false</code> | This argument tells the `Defer.css()` method to delay downloading the CSS file until there is a user interaction. |

**Example**
Expand All @@ -741,7 +741,7 @@ Using the `Defer.css()` method to lazy load
<script>
var fileUrl = 'https://pro.fontawesome.com/releases/v5.14.0/css/all.css';
Defer.css(fileUrl, 'fa5-css', 0, function() {
Defer.css(fileUrl, {crossorigin: 'anonymous'}, 0, function() {
console.info('FontAwesome is loaded.'); // debug
});
</script>
Expand All @@ -764,8 +764,9 @@ No tag will be animated unless the user scrolls to its position.
<script>
var origin = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1';
// This script will lazy load animate.css library.
Defer.css(origin + '/animate.min.css', 'animate-css', 0, function () {
// This script will lazy load animate.css library
// only when the page is displayed on a screen-based device
Defer.css(origin + '/animate.min.css', {media: 'screen'}, 0, function () {
console.info('Animate.css is loaded.'); // debug
// adds animation classes to demo blocks.
Expand All @@ -778,7 +779,7 @@ No tag will be animated unless the user scrolls to its position.

<a name="Defer.js"></a>

### Defer.js(fileUrl, [id], [delay], [onload], [waitForUserAction]) ⇒ <code>void</code>
### Defer.js(fileUrl, [id_or_attributes], [delay], [onload], [waitForUserAction]) ⇒ <code>void</code>
We use the `Defer.js()` method to defer a load of 3rd-party
JavaScript libraries, widgets, add-ons, etc. without blocking the page rendering.

Expand All @@ -794,10 +795,10 @@ The `fileUrl` will not be fetched unless the user starts interacting with your p

| Param | Type | Default | Description |
| --- | --- | --- | --- |
| fileUrl | <code>string</code> | | URL to the js file that should be lazy loaded. |
| [id] | <code>string</code> | | The ID will be assigned to the script tag to avoid downloading the same file multiple times. |
| [delay] | <code>number</code> | <code>0</code> | The time, in milliseconds that the page should wait before the JS file is fetched. |
| [onload] | <code>function</code> | | The callback function will be executed if the js file is successfully loaded. |
| fileUrl | <code>string</code> | | The URL to the js file that should be lazy loaded. |
| [id_or_attributes] | <code>string</code> \| <code>object</code> | | An ID string or an attribute object for the script tag that should be added to the page. |
| [delay] | <code>number</code> | <code>0</code> | A timespan, in milliseconds, that the page should wait before the JS file is fetched. |
| [onload] | <code>function</code> | | A callback function will be executed if the js file is successfully loaded. |
| [waitForUserAction] | <code>boolean</code> | <code>false</code> | This argument tells the `Defer.js()` method to delay downloading the JS file until there is a user interaction. |

**Example**
Expand All @@ -815,34 +816,12 @@ so the `waitForUserAction` argument (the fifth argument) is set to `false`.
dataLayer.push(['js', new Date()]);
dataLayer.push(['config', GTM_ID]);
Defer.js('https://www.googletagmanager.com/gtag/js?id=' + GTM_ID, 'google-tag', 0, function() {
Defer.js('https://www.googletagmanager.com/gtag/js?id=' + GTM_ID, {'data-id': GTM_ID}, 0, function() {
console.info('Google Tag Manager is loaded.'); // debug
}, false);
</script>
```
**Example**
Lazy load AddThis add-on.

Using the `Defer.js()` method to lazy load
[AddThis Share Buttons](https://www.addthis.com/get/share/)
and its external resources.
AddThis add-on will not be loaded until the user starts interacting with the page
(the `waitForUserAction` argument (the fifth argument) is set to `true`).

```html
<div class="demo-addthis"></div>

<script>
var ADDTHIS_ID = 'ra-5c68e61cf456f1cb';
var fileUrl = 'https://s7.addthis.com/js/300/addthis_widget.js#pubid=' + ADDTHIS_ID;
var loaded = false;
Defer.js(fileUrl, 'addthis-js', 0, function() {
console.info('AddThis add-on is loaded.'); // debug
}, true);
</script>
```
**Example**
Lazy load Prism.js library.

Using Defer.js to lazy load Prism.js library and its assets.
Expand Down
7 changes: 2 additions & 5 deletions demo/demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ html {
box-sizing: border-box;
font-size: 16px;
line-height: 1.3;
scroll-behavior: smooth;
}

body {
Expand Down Expand Up @@ -98,17 +99,13 @@ main {
margin: auto;
padding: 1em;
background-color: rgba(250, 250, 250, 0.8);
box-shadow: 0 2em rgba(100,100,100,0.3);
}

header>* {
margin: 0.5em 0;
}

.addthis_inline_share_toolbox {
margin: 0.5em 0;
height: 35px;
}

#navs {
padding: 0;
margin: 0;
Expand Down
Loading

0 comments on commit a0e1c0a

Please sign in to comment.