Skip to content

Commit a0e1c0a

Browse files
shinsentershinsenter
authored
For 3.7.0 (#130)
1 parent 2e15959 commit a0e1c0a

13 files changed

+309
-406
lines changed

‎.build/.eslintrc

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"SharedArrayBuffer": "readonly"
1010
},
1111
"parserOptions": {
12-
"ecmaVersion": 3
12+
"ecmaVersion": 5
1313
},
1414
"rules": {
1515
"accessor-pairs": "error",
@@ -52,7 +52,7 @@
5252
"function-paren-newline": "error",
5353
"generator-star-spacing": "error",
5454
"global-require": "error",
55-
"guard-for-in": "error",
55+
"guard-for-in": "off",
5656
"handle-callback-err": "error",
5757
"id-blacklist": "error",
5858
"id-length": "off",
@@ -191,7 +191,7 @@
191191
"object-curly-newline": "error",
192192
"object-curly-spacing": "error",
193193
"object-property-newline": "error",
194-
"object-shorthand": "error",
194+
"object-shorthand": "off",
195195
"one-var": "off",
196196
"one-var-declaration-per-line": "error",
197197
"operator-assignment": "error",

‎README.md

+31-52
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ By using Defer.js, you can say goodbye to these issues! With its lazy loading ca
2323
[![NPM](https://nodei.co/npm/@shinsenter/defer.js.png?downloads=true)](https://www.npmjs.com/package/@shinsenter/defer.js)
2424

2525
- **Package**: [@shinsenter/defer.js](https://www.npmjs.com/package/@shinsenter/defer.js)
26-
- **Version**: 3.6.0
26+
- **Version**: 3.7.0
2727
- **Author**: Mai Nhut Tan <[email protected]>
2828
- **Copyright**: 2019-2023 SHIN Company <https://code.shin.company/>
2929
- **License**: [MIT](https://code.shin.company/defer.js/blob/master/LICENSE)
@@ -95,15 +95,15 @@ Add the Defer.js library to your page by including a `<script>` tag just below t
9595
<title>My Awesome Page</title>
9696

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

100100
<!-- ... -->
101101
</head>
102102
```
103103

104104
### Inlining the library
105105

106-
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.
106+
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.
107107

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

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

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

143143
<!-- Add the IntersectionObserver Polyfill for legacy browsers -->
144-
<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>
144+
<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>
145145
```
146146

147147
*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.
@@ -154,8 +154,8 @@ To enhance performance for legacy browsers that don't support the `IntersectionO
154154
* [.lazy](#Defer.lazy) : <code>boolean</code>
155155
* [.all([selector], [delay], [waitForUserAction])](#Defer.all) ⇒ <code>void</code>
156156
* [.dom([selector], [delay], [unveiledClass], [resolver], [observeOptions])](#Defer.dom) ⇒ <code>void</code>
157-
* [.css(fileUrl, [id], [delay], [onload], [waitForUserAction])](#Defer.css) ⇒ <code>void</code>
158-
* [.js(fileUrl, [id], [delay], [onload], [waitForUserAction])](#Defer.js) ⇒ <code>void</code>
157+
* [.css(fileUrl, [id_or_attributes], [delay], [onload], [waitForUserAction])](#Defer.css) ⇒ <code>void</code>
158+
* [.js(fileUrl, [id_or_attributes], [delay], [onload], [waitForUserAction])](#Defer.js) ⇒ <code>void</code>
159159
* [.reveal(node, [unveiledClass])](#Defer.reveal) ⇒ <code>void</code>
160160
* ~~[defer(func, [delay])](#defer)~~
161161
* ~~[deferimg([selector], [delay], [unveiledClass], [resolver], [observeOptions])](#deferimg)~~
@@ -181,7 +181,7 @@ Wrapping your script with `Defer()` may help your website prevent render-blockin
181181
| Param | Type | Default | Description |
182182
| --- | --- | --- | --- |
183183
| func | <code>function</code> | | A function to be executed after page fully loaded. |
184-
| [delay] | <code>number</code> | <code>0</code> | The time, in milliseconds that it should wait before the function is executed. |
184+
| [delay] | <code>number</code> | <code>0</code> | A timespan, in milliseconds, that the page should wait before the function is executed. |
185185
| [waitForUserAction] | <code>boolean</code> | <code>false</code> | This argument tells `Defer()` to delay the execution and wait until there is a user interaction. |
186186

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

242242

@@ -305,7 +305,7 @@ View the discussion [#122](https://code.shin.company/defer.js/discussions/122) f
305305
| Param | Type | Default | Description |
306306
| --- | --- | --- | --- |
307307
| [selector] | <code>string</code> | <code>&quot;[type&#x3D;deferjs]&quot;</code> | A CSS selector selects target script tags that will be Lazy loaded. |
308-
| [delay] | <code>number</code> | <code>0</code> | The time, in milliseconds that it should wait before a script tag is executed. |
308+
| [delay] | <code>number</code> | <code>0</code> | A timespan, in milliseconds, that the page should wait before a script tag is executed. |
309309
| [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. |
310310

311311
**Example**
@@ -409,7 +409,7 @@ Please check out the below examples for more details.
409409
| Param | Type | Default | Description |
410410
| --- | --- | --- | --- |
411411
| [selector] | <code>string</code> | <code>&quot;[data-src]&quot;</code> | A CSS selector selects target HTML elements that will be unveiled later. |
412-
| [delay] | <code>number</code> | <code>0</code> | The time, in milliseconds that it should wait before lazy loading is applied for target elements. |
412+
| [delay] | <code>number</code> | <code>0</code> | A timespan, in milliseconds, that the page should wait before lazy loading is applied for target elements. |
413413
| [unveiledClass] | <code>string</code> | | Class names that will be added to target elements when they are unveiled. |
414414
| [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. |
415415
| [observeOptions] | <code>object</code> | | [Intersection observer options](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) |
@@ -634,12 +634,12 @@ This example uses the `Defer.dom()` method to defer a load of a Youtube iframe.
634634

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

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

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

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

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

716716
| Param | Type | Default | Description |
717717
| --- | --- | --- | --- |
718-
| fileUrl | <code>string</code> | | URL to the CSS file that should be lazy loaded. |
719-
| [id] | <code>string</code> | | The ID will be assigned to the script tag to avoid downloading the same file multiple times. |
720-
| [delay] | <code>number</code> | <code>0</code> | The time, in milliseconds that the page should wait before the CSS file is fetched. |
721-
| [onload] | <code>function</code> | | The callback function will be executed if the CSS file is successfully loaded. |
718+
| fileUrl | <code>string</code> | | The URL to the CSS file that should be lazy loaded. |
719+
| [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. |
720+
| [delay] | <code>number</code> | <code>0</code> | A timespan, in milliseconds, that the page should wait before the CSS file is fetched. |
721+
| [onload] | <code>function</code> | | A callback function will be executed if the CSS file is successfully loaded. |
722722
| [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. |
723723

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

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

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

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

795796
| Param | Type | Default | Description |
796797
| --- | --- | --- | --- |
797-
| fileUrl | <code>string</code> | | URL to the js file that should be lazy loaded. |
798-
| [id] | <code>string</code> | | The ID will be assigned to the script tag to avoid downloading the same file multiple times. |
799-
| [delay] | <code>number</code> | <code>0</code> | The time, in milliseconds that the page should wait before the JS file is fetched. |
800-
| [onload] | <code>function</code> | | The callback function will be executed if the js file is successfully loaded. |
798+
| fileUrl | <code>string</code> | | The URL to the js file that should be lazy loaded. |
799+
| [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. |
800+
| [delay] | <code>number</code> | <code>0</code> | A timespan, in milliseconds, that the page should wait before the JS file is fetched. |
801+
| [onload] | <code>function</code> | | A callback function will be executed if the js file is successfully loaded. |
801802
| [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. |
802803

803804
**Example**
@@ -815,34 +816,12 @@ so the `waitForUserAction` argument (the fifth argument) is set to `false`.
815816
dataLayer.push(['js', new Date()]);
816817
dataLayer.push(['config', GTM_ID]);
817818
818-
Defer.js('https://www.googletagmanager.com/gtag/js?id=' + GTM_ID, 'google-tag', 0, function() {
819+
Defer.js('https://www.googletagmanager.com/gtag/js?id=' + GTM_ID, {'data-id': GTM_ID}, 0, function() {
819820
console.info('Google Tag Manager is loaded.'); // debug
820821
}, false);
821822
</script>
822823
```
823824
**Example**
824-
Lazy load AddThis add-on.
825-
826-
Using the `Defer.js()` method to lazy load
827-
[AddThis Share Buttons](https://www.addthis.com/get/share/)
828-
and its external resources.
829-
AddThis add-on will not be loaded until the user starts interacting with the page
830-
(the `waitForUserAction` argument (the fifth argument) is set to `true`).
831-
832-
```html
833-
<div class="demo-addthis"></div>
834-
835-
<script>
836-
var ADDTHIS_ID = 'ra-5c68e61cf456f1cb';
837-
var fileUrl = 'https://s7.addthis.com/js/300/addthis_widget.js#pubid=' + ADDTHIS_ID;
838-
var loaded = false;
839-
840-
Defer.js(fileUrl, 'addthis-js', 0, function() {
841-
console.info('AddThis add-on is loaded.'); // debug
842-
}, true);
843-
</script>
844-
```
845-
**Example**
846825
Lazy load Prism.js library.
847826

848827
Using Defer.js to lazy load Prism.js library and its assets.

‎demo/demo.css

+2-5
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ html {
55
box-sizing: border-box;
66
font-size: 16px;
77
line-height: 1.3;
8+
scroll-behavior: smooth;
89
}
910

1011
body {
@@ -98,17 +99,13 @@ main {
9899
margin: auto;
99100
padding: 1em;
100101
background-color: rgba(250, 250, 250, 0.8);
102+
box-shadow: 0 2em rgba(100,100,100,0.3);
101103
}
102104

103105
header>* {
104106
margin: 0.5em 0;
105107
}
106108

107-
.addthis_inline_share_toolbox {
108-
margin: 0.5em 0;
109-
height: 35px;
110-
}
111-
112109
#navs {
113110
padding: 0;
114111
margin: 0;

0 commit comments

Comments
 (0)