Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

For 3.7.0 #130

Merged
merged 1 commit into from
Mar 7, 2024
Merged

For 3.7.0 #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .build/.eslintrc
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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