From 0df8ae636aafdb2b1403744e5dad0d35b30a6c76 Mon Sep 17 00:00:00 2001
From: Shin <2082119+shinsenter@users.noreply.github.com>
Date: Wed, 7 Sep 2022 15:51:39 +0900
Subject: [PATCH] For v3.4.0 (#119)

---
 .build/.eslintrc       |   2 +-
 .build/.minify         |  12 +-
 README.md              | 141 ++++++++++----------
 demo/index.html        | 107 ++++++++-------
 dist/defer.min.js      |   4 +-
 dist/defer_plus.min.js |   4 +-
 dist/polyfill.min.js   |   2 +-
 docs/about.md          |  14 +-
 docs/apis.md           | 127 +++++++++---------
 docs/index.md          | 141 ++++++++++----------
 package-lock.json      |   4 +-
 package.json           |   6 +-
 src/defer.js           | 294 ++++++++++++++++++++++++-----------------
 src/docs.js            | 100 +++++++-------
 src/fallback.js        |  15 ++-
 15 files changed, 511 insertions(+), 462 deletions(-)

diff --git a/.build/.eslintrc b/.build/.eslintrc
index e8d6a97..5a472e2 100644
--- a/.build/.eslintrc
+++ b/.build/.eslintrc
@@ -55,7 +55,7 @@
     "guard-for-in": "error",
     "handle-callback-err": "error",
     "id-blacklist": "error",
-    "id-length": "error",
+    "id-length": "off",
     "id-match": "error",
     "implicit-arrow-linebreak": "error",
     "indent": ["error", 2],
diff --git a/.build/.minify b/.build/.minify
index 77ebd9d..d753681 100644
--- a/.build/.minify
+++ b/.build/.minify
@@ -1,13 +1,15 @@
 {
     "parse": {},
     "mangle": {
-        "reserved":     ["log", "debug"]
+        "reserved":     ["log", "debug", "perf_begin", "perf_end"]
     },
     "compress": {
         "drop_console": true,
-        "passes":       5,
+        "hoist_funs":   true,
+        "passes":       10,
         "pure_getters": true,
-        "pure_funcs":   ["log", "debug"]
+        "pure_funcs":   ["log", "debug", "perf_begin", "perf_end"],
+        "reduce_funcs": true
     },
     "output": {
         "comments":     "/^!/",
@@ -21,7 +23,7 @@
     "nameCache":        null,
     "sourceMap":        false,
     "toplevel":         false,
-    "v8":               false,
+    "v8":               true,
     "warnings":         false,
-    "webkit":           false
+    "webkit":           true
 }
\ No newline at end of file
diff --git a/README.md b/README.md
index c6a455b..464e2d6 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Package @shinsenter/defer.js
 
-🥇 A JavaScript micro-library that helps you lazy load (almost) anything. It's zero-dependency, super-efficient, and Web Vitals friendly.
+🥇 A JavaScript micro-library that helps you lazy load (almost) anything. Defer.js is zero-dependency, super-efficient, and Web Vitals friendly.
 
 [![NPM](https://img.shields.io/npm/l/@shinsenter/defer.js)](https://code.shin.company/defer.js/blob/master/LICENSE)
 [![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/@shinsenter/defer.js)](https://snyk.io/advisor/npm-package/@shinsenter/defer.js)
@@ -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**: 3.3.0
+- **Version**: 3.4.0
 - **Author**: Mai Nhut Tan <shin@shin.company>
 - **Copyright**: 2022 AppSeeds <https://code.shin.company/>
 - **License**: [MIT](https://code.shin.company/defer.js/blob/master/LICENSE)
@@ -80,7 +80,7 @@ Just put a `<script>` tag pointing to the library URL just below the opening `<h
   <title>My Awesome Page</title>
 
   <!-- Put defer.min.js here -->
-  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/defer.min.js"></script>
 
   <!-- ... -->
 </head>
@@ -96,7 +96,7 @@ Because `defer.min.js` is optimized to a very tiny file size, you can even inlin
   <title>My Awesome Page</title>
 
   <!-- Copy the script from the below URL -->
-  <!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer.min.js -->
+  <!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/defer.min.js -->
   <script>/* then replace this comment block with the content of defer.min.js */</script>
 
   <!-- ... -->
@@ -114,7 +114,7 @@ just use `defer_plus.min.js` instead of `defer.min.js`.
   <title>My Awesome Page</title>
 
   <!-- Put defer_plus.min.js here -->
-  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer_plus.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/defer_plus.min.js"></script>
 
   <!-- ... -->
 </head>
@@ -131,20 +131,20 @@ right after the `defer.min.js` script tag as the following example:
 <script>/* the content of defer.min.js */</script>
 
 <!-- If legacy browsers like Internet Explorer 9 still need to be supported -->
-<!-- Please put IntersectionObserver polyfill right after defer.js script tag -->
-<script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/polyfill.min.js"><\/script>');</script>
+<!-- Please put IntersectionObserver polyfill right after the Defer.js script tag -->
+<script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/polyfill.min.js"><\/script>');</script>
 ```
 
 *HINT*: Modern browsers support `IntersectionObserver` feature,
 so you don't have to be concerned about it if you don't care about IE users.
 ## Functions
 
-* [Defer(func, [delay], [waitForInteraction])](#Defer) ⇒ <code>void</code>
+* [Defer(func, [delay], [waitForUserAction])](#Defer) ⇒ <code>void</code>
     * [.lazy](#Defer.lazy) : <code>boolean</code>
-    * [.all([selector], [delay], [waitForInteraction])](#Defer.all) ⇒ <code>void</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], [waitForInteraction])](#Defer.css) ⇒ <code>void</code>
-    * [.js(fileUrl, [id], [delay], [onload], [waitForInteraction])](#Defer.js) ⇒ <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>
     * [.reveal(node, [unveiledClass])](#Defer.reveal) ⇒ <code>void</code>
 * ~~[defer(func, [delay])](#defer)~~
 * ~~[deferimg([selector], [delay], [unveiledClass], [resolver], [observeOptions])](#deferimg)~~
@@ -160,7 +160,7 @@ so you don't have to be concerned about it if you don't care about IE users.
 
 <a name="Defer"></a>
 
-## Defer(func, [delay], [waitForInteraction]) ⇒ <code>void</code>
+## Defer(func, [delay], [waitForUserAction]) ⇒ <code>void</code>
 Heavy DOM manipulations may cause render-blocking issues in real scenarios.
 Wrapping your script with `Defer()` may help your website prevent render-blocking issues.
 
@@ -171,7 +171,7 @@ Wrapping your script with `Defer()` may help your website prevent render-blockin
 | --- | --- | --- | --- |
 | 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. |
-| [waitForInteraction] | <code>boolean</code> | <code>false</code> | This argument tells `Defer()` to delay the execution and wait until there is a user interaction. |
+| [waitForUserAction] | <code>boolean</code> | <code>false</code> | This argument tells `Defer()` to delay the execution and wait until there is a user interaction. |
 
 **Example**  
 jQuery is used in this example to perform some DOM manipulations.
@@ -220,12 +220,12 @@ and wait until the user starts interacting with your page.
 </script>
 ```
 
-* [Defer(func, [delay], [waitForInteraction])](#Defer) ⇒ <code>void</code>
+* [Defer(func, [delay], [waitForUserAction])](#Defer) ⇒ <code>void</code>
     * [.lazy](#Defer.lazy) : <code>boolean</code>
-    * [.all([selector], [delay], [waitForInteraction])](#Defer.all) ⇒ <code>void</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], [waitForInteraction])](#Defer.css) ⇒ <code>void</code>
-    * [.js(fileUrl, [id], [delay], [onload], [waitForInteraction])](#Defer.js) ⇒ <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>
     * [.reveal(node, [unveiledClass])](#Defer.reveal) ⇒ <code>void</code>
 
 
@@ -240,7 +240,7 @@ Setting `Defer.lazy=true` tells the library to delay the execution
 of deferred scripts until the user starts interacting with the page
 regardless of the page load event.
 
-It will override the default behavior of `waitForInteraction`
+It will override the default behavior of `waitForUserAction`
 argument of the `Defer()` method.
 
 Changing this variable will also affect the behavior of these functions:
@@ -264,7 +264,7 @@ To override the default behavior of the `Defer()` method.
 
 <a name="Defer.all"></a>
 
-### Defer.all([selector], [delay], [waitForInteraction]) ⇒ <code>void</code>
+### Defer.all([selector], [delay], [waitForUserAction]) ⇒ <code>void</code>
 Slow scripts (third-party libraries, add-ons, widgets, etc.)
 may cause [Web Vitals](https://web.dev/vitals/) issues in real scenarios.
 
@@ -275,10 +275,10 @@ This trick also works perfectly with `<script>` tags with an `src` attribute.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
 **Note**: (1) To avoid unexpected behavior when using
-the `Defer.all()` function to delay the execution of script tags,
-you should call run `Defer.all()` with a regular script tag.  
+the `Defer.all()` method to delay the execution of script tags,
+you should call run the `Defer.all()` method with a regular script tag.  
 **Note**: (2) Lazy loading behavior changed since v3.0
-when you set `Defer.lazy=true` or `waitForInteraction=true`.
+when you set `Defer.lazy=true` or `waitForUserAction=true`.
 A `<script>` tags with `type="deferjs"` will not execute
 unless the user starts interacting with your page.  
 **Note**: (3) [Resource hints](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) feature was added since v3.2
@@ -290,7 +290,7 @@ This feature is discussed at [#112](https://code.shin.company/defer.js/issues/11
 | --- | --- | --- | --- |
 | [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. |
-| [waitForInteraction] | <code>boolean</code> | <code>false</code> | This argument tells `Defer.all()` to delay the execution of scripts until there is a user interaction. |
+| [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**  
 Using magic `type="deferjs"` attribute:
@@ -308,18 +308,18 @@ After:
 <script type="deferjs">
   // your JavaScript will still be here,
   // but it will not run unless the user starts interacting with your page.
-  console.log('This script is lazy loaded with type="deferjs" attribute.');
+  console.info('This script is lazy loaded with type="deferjs" attribute.');
 </script>
 ```
 **Example**  
 Using your value for the type attribute, such as `type="my-magic"`:
 
 If you hate using the `type="deferjs"` attribute,
-you can even choose yours by using the `Defer.all()` function.
+you can even choose yours by using the `Defer.all()` method.
 
 Notice: To avoid unexpected behavior when using
-the `Defer.all()` function to delay the execution of script tags,
-you should call run `Defer.all()` with a regular script tag.
+the `Defer.all()` method to delay the execution of script tags,
+you should call run the `Defer.all()` method with a regular script tag.
 
 ```html
 <script type="my-magic">
@@ -338,18 +338,18 @@ you should call run `Defer.all()` with a regular script tag.
 </script>
 ```
 **Example**  
-Using `Defer.all()` with script tags with `src` attribute:
+Using the `Defer.all()` method for script tags with `src` attribute:
 
 Your scripts will work perfectly when you mix inline scripts
 and script tags with an src attribute, like the below example.
 
-The `waitForInteraction` argument (the fifth argument) is set to `true`,
+The `waitForUserAction` argument (the fifth argument) is set to `true`,
 the library will defer the load of the tippy.js library until the user starts
 interacting, when the user moves his/her mouse on the button, a tooltip will show.
 
 Notice: To avoid unexpected behavior when using
-the `Defer.all()` function to delay the execution of script tags,
-you should call run `Defer.all()` with a regular script tag.
+the `Defer.all()` method to delay the execution of script tags,
+you should call run the `Defer.all()` method with a regular script tag.
 
 
 ```html
@@ -379,7 +379,7 @@ The `Defer.dom()` method is useful in the below use cases:
 - Scroll-reveal features, such as handling AJAX updating when a block is entering the viewport.
 - An element that was deferred by Defer.dom() will be unveiled as soon as the page finished loading.
 
-An element that was deferred by `Defer.dom()` will be unveiled
+An element that was deferred by the `Defer.dom()` method will be unveiled
 when it going to enters the browser viewport.
 
 The `Defer.dom()` method also converts `data-*` attributes of the elements
@@ -418,7 +418,6 @@ a very small placeholder image before the real image gets downloaded.
 ```html
 <div id="demo-basic">
   <img alt="A lazy image" width="200" height="300" loading="lazy"
-       src=""
        data-src="https://picsum.photos/id/1003/200/300">
 
   <img alt="A lazy image with a low-resolution placeholder"
@@ -495,7 +494,7 @@ and their children's HTML nodes.
 **Example**  
 Basic usage with adding CSS class.
 
-`Defer.dom()` also allows you to add CSS class names when an element is unveiled.
+The `Defer.dom()` method also allows you to add CSS class names when an element is unveiled.
 In this example, we will add some CSS class names to make an `<img>` tag animate.
 
 ```html
@@ -577,7 +576,7 @@ but we can also use CSS class names instead of inline `style` attributes.
 **Example**  
 Lazy load a video.
 
-With `Defer.dom()`, we can easily defer the load of various media tags, such as a `<video>` tag.
+With the `Defer.dom()` method, we can easily defer the load of various media tags, such as a `<video>` tag.
 
 ```html
 <div id="demo-video">
@@ -597,7 +596,7 @@ With `Defer.dom()`, we can easily defer the load of various media tags, such as
 **Example**  
 Lazy load an iframe.
 
-With `Defer.dom()`, we can effortlessly defer the load of iframe tags.
+With the `Defer.dom()` method, we can effortlessly defer the load of iframe tags.
 
 ```html
 <div id="demo-iframe">
@@ -609,13 +608,13 @@ With `Defer.dom()`, we can effortlessly defer the load of iframe tags.
 </div>
 
 <script>
-  Defer.dom('#demo-iframe iframe', 0, 'animate__animated animate__fadeIn');
+  Defer.dom('#demo-iframe iframe', 0, 'iframe-loaded');
 </script>
 ```
 **Example**  
 Lazy load a Youtube video.
 
-This example uses `Defer.dom()` to defer a load of a Youtube iframe.
+This example uses the `Defer.dom()` method to defer a load of a Youtube iframe.
 
 ```html
 <div id="demo-youtube">
@@ -629,13 +628,13 @@ This example uses `Defer.dom()` to defer a load of a Youtube iframe.
 </div>
 
 <script>
-  Defer.dom('#demo-youtube iframe', 0, 'animate__animated animate__fadeIn');
+  Defer.dom('#demo-youtube iframe', 0, 'youtube-loaded');
 </script>
 ```
 **Example**  
 Lazy load a Facebook post.
 
-This example uses `Defer.dom()` to defer a load of a Facebook post.
+This example uses the `Defer.dom()` method to defer a load of a Facebook post.
 
 ```html
 <div id="demo-facebook">
@@ -648,13 +647,13 @@ This example uses `Defer.dom()` to defer a load of a Facebook post.
 </div>
 
 <script>
-  Defer.dom('#demo-facebook iframe', 0, 'animate__animated animate__fadeIn');
+  Defer.dom('#demo-facebook iframe', 0, 'facebook-loaded');
 </script>
 ```
 **Example**  
 Lazy load a Discord chat box.
 
-This example uses `Defer.dom()` to defer a load of a Discord chat box.
+This example uses the `Defer.dom()` method to defer a load of a Discord chat box.
 
 ```html
 <iframe id="discord-widget" title="Discord"
@@ -671,7 +670,7 @@ This example uses `Defer.dom()` to defer a load of a Discord chat box.
 **Example**  
 Scroll and reveal.
 
-`Defer.dom()` also helps you do an action when an element is unveiled.
+The `Defer.dom()` method also helps you do an action when an element is unveiled.
 
 In this example, when the user scrolls to the bottom of the page,
 he/she will see a message as soon as an element with `id="surprise-me"` appears.
@@ -679,7 +678,7 @@ he/she will see a message as soon as an element with `id="surprise-me"` appears.
 ```html
 <script>
   Defer.dom('#surprise-me', 1000, 'seen', function(node) {
-    alert('Yay!\n\nYou have seen all examples.\nHave fun coding with @shinsenter/defer.js!');
+    alert('Yay!\n\nYou have seen all examples.\nHave fun with Defer.js!');
   });
 </script>
 ```
@@ -688,13 +687,13 @@ 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], [waitForInteraction]) ⇒ <code>void</code>
+### Defer.css(fileUrl, [id], [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.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
 **Note**: Lazy loading behavior changed since v3.0
-when you set `Defer.lazy=true` or `waitForInteraction=true`.
+when you set `Defer.lazy=true` or `waitForUserAction=true`.
 The `fileUrl` will not be fetched unless the user starts interacting with your page.  
 **Since**: 2.0  
 
@@ -704,10 +703,10 @@ The `fileUrl` will not be fetched unless the user starts interacting with your p
 | [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. |
-| [waitForInteraction] | <code>boolean</code> | <code>false</code> | This argument tells `Defer.css()` to delay downloading the CSS file until there is a user interaction. |
+| [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**  
-Using `Defer.css()` to lazy load
+Using the `Defer.css()` method to lazy load
 [FontAwesome](https://fontawesome.com/docs/web/setup/get-started) (CSS and some font files).
 
 ```html
@@ -727,7 +726,7 @@ Using `Defer.css()` to lazy load
   var fileUrl = 'https://pro.fontawesome.com/releases/v5.14.0/css/all.css';
 
   Defer.css(fileUrl, 'fa5-css', 0, function() {
-    console.info('Debug', 'FontAwesome is loaded.'); // debug
+    console.info('FontAwesome is loaded.'); // debug
   });
 </script>
 ```
@@ -738,7 +737,7 @@ Lazy load animate.css library.
 In this example, we want the download of the
 [Animate.css library](https://animate.style/#documentation)
 to wait for the first user interaction with your page
-so the `waitForInteraction` argument (the fifth argument) is set to `true`.
+so the `waitForUserAction` argument (the fifth argument) is set to `true`.
 
 When the Animate.css library was downloaded,
 we will add CSS classes from Animate.css to every tag with `class=".demo"` on the page.
@@ -751,7 +750,7 @@ No tag will be animated unless the user scrolls to its position.
 
   // This script will lazy load animate.css library.
   Defer.css(origin + '/animate.min.css', 'animate-css', 0, function () {
-    console.info('Debug', 'Animate.css is loaded.'); // debug
+    console.info('Animate.css is loaded.'); // debug
 
     // adds animation classes to demo blocks.
     Defer.dom('.demo', 100, 'animate__animated animate__fadeIn');
@@ -763,17 +762,17 @@ No tag will be animated unless the user scrolls to its position.
 
 <a name="Defer.js"></a>
 
-### Defer.js(fileUrl, [id], [delay], [onload], [waitForInteraction]) ⇒ <code>void</code>
-We use `Defer.js()` to defer a load of 3rd-party
+### Defer.js(fileUrl, [id], [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.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
-**Note**: (1) Because the download of a file using `Defer.js()` function is asynchronous,
-to avoid dependency error when lazy loading a third-party library using `Defer.js()`,
+**Note**: (1) Because the download of a file using the `Defer.js()` method is asynchronous,
+to avoid dependency error when lazy loading a third-party library using the `Defer.js()` method,
 it is highly recommended that the `onload` callback function be used
 to make sure that the library you needed is completely defined.  
 **Note**: (2) Lazy loading behavior changed since v3.0
-when you set `Defer.lazy=true` or `waitForInteraction=true`.
+when you set `Defer.lazy=true` or `waitForUserAction=true`.
 The `fileUrl` will not be fetched unless the user starts interacting with your page.  
 **Since**: 2.0  
 
@@ -783,15 +782,15 @@ The `fileUrl` will not be fetched unless the user starts interacting with your p
 | [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. |
-| [waitForInteraction] | <code>boolean</code> | <code>false</code> | This argument tells `Defer.js()` to delay downloading the JS file until there is a user interaction. |
+| [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**  
 An alternative way to lazy load Google Tag Manager script.
 
-Using `Defer.js()` to lazy load Google Tag Manager library and its external scripts.
+Using the `Defer.js()` method to lazy load Google Tag Manager library and its external scripts.
 
 In this example, we want the GTM to execute as soon as the page is loaded
-so the `waitForInteraction` argument (the fifth argument) is set to `false`.
+so the `waitForUserAction` argument (the fifth argument) is set to `false`.
 
 ```html
 <script>
@@ -801,18 +800,18 @@ so the `waitForInteraction` argument (the fifth argument) is set to `false`.
   dataLayer.push(['config', GTM_ID]);
 
   Defer.js('https://www.googletagmanager.com/gtag/js?id=' + GTM_ID, 'google-tag', 0, function() {
-    console.info('Debug', 'Google Tag Manager is loaded.'); // debug
+    console.info('Google Tag Manager is loaded.'); // debug
   }, false);
 </script>
 ```
 **Example**  
 Lazy load AddThis add-on.
 
-Using `Defer.js()` to lazy load
+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 `waitForInteraction` argument (the fifth argument) is set to `true`).
+(the `waitForUserAction` argument (the fifth argument) is set to `true`).
 
 ```html
 <div class="demo-addthis"></div>
@@ -822,7 +821,7 @@ AddThis add-on will not be loaded until the user starts interacting with the pag
   var loaded  = false;
 
   Defer.js(fileUrl, 'addthis-js', 0, function() {
-    console.info('Debug', 'AddThis add-on is loaded.'); // debug
+    console.info('AddThis add-on is loaded.'); // debug
   }, true);
 </script>
 ```
@@ -847,13 +846,13 @@ only when the user scrolls to any `code` block position.
 
   // this script will lazy load Prism.js library and its dark theme.
   // when loading is done, it will apply code formatting to every <code> tag.
-  var origin = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0';
+  var origin = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0';
   Defer.css(origin + '/themes/prism-tomorrow.min.css', 'prism-css');
   Defer.js(origin + '/prism.min.js', 'prism-js', 0, function () {
-    console.info('Debug', 'Prism.js is loaded.'); // debug
-
     // enables code highlighting for code tags using Defer.dom()
     Defer.dom('pre code', 100, 'ide-loaded', Prism.highlightElement, {rootMargin: "120%"});
+
+    console.info('Prism.js is loaded.'); // debug
   });
 </script>
 ```
@@ -902,7 +901,7 @@ document.querySelectorAll('.multi-lazy')
 ## ~~defer(func, [delay])~~
 ***Deprecated***
 
-Deprecated since version 2.0
+Deprecated from version 2.0
 
 **Kind**: global function  
 **See**: [Defer](#Defer)  
@@ -921,7 +920,7 @@ Deprecated since version 2.0
 ## ~~deferimg([selector], [delay], [unveiledClass], [resolver], [observeOptions])~~
 ***Deprecated***
 
-Deprecated since version 2.0
+Deprecated from version 2.0
 
 **Kind**: global function  
 **See**: [dom](#Defer.dom)  
@@ -943,7 +942,7 @@ Deprecated since version 2.0
 ## ~~deferiframe([selector], [delay], [unveiledClass], [resolver], [observeOptions])~~
 ***Deprecated***
 
-Deprecated since version 2.0
+Deprecated from version 2.0
 
 **Kind**: global function  
 **See**: [dom](#Defer.dom)  
@@ -965,7 +964,7 @@ Deprecated since version 2.0
 ## ~~deferstyle(src, [id], [delay], [onload])~~
 ***Deprecated***
 
-Deprecated since version 2.0
+Deprecated from version 2.0
 
 **Kind**: global function  
 **See**: [css](#Defer.css)  
@@ -986,7 +985,7 @@ Deprecated since version 2.0
 ## ~~deferscript(src, [id], [delay], [onload])~~
 ***Deprecated***
 
-Deprecated since version 2.0
+Deprecated from version 2.0
 
 **Kind**: global function  
 **See**: [js](#Defer.js)  
diff --git a/demo/index.html b/demo/index.html
index 4986c7e..1ad22dd 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -9,22 +9,20 @@
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>@shinsenter/defer.js</title>
-    <meta name="description" content="A super small, super-efficient library that helps you lazy load (almost) anything. Core Web Vitals friendly.">
+    <title>The Defer.js library (@shinsenter/defer.js)</title>
+    <meta name="description" content="🥇 A JavaScript micro-library that helps you lazy load (almost) anything. Defer.js is zero-dependency, super-efficient, and Web Vitals friendly.">
 
     <link rel="stylesheet" href="./demo.css" media="screen">
     <script src="../src/defer.js"></script>
     <!-- <script src="../dist/defer.min.js"></script> -->
-    <script defer crossorigin="anonymous" referrerpolicy="no-referrer"
-        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js"
-        integrity="sha512-6ORWJX/LrnSjBzwefdNUyLCMTIsGoNP6NftMy2UAm1JBm6PRZCO1d7OHBStWpVFZLO+RerTvqX/Z9mBFfCJZ4A=="></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
 </head>
 
 <body>
     <main>
         <header>
-            <h1><code>@shinsenter/defer.js</code></h1>
-            <p>🥇 A JavaScript micro-library that helps you lazy load (almost) anything. It's zero-dependency, super-efficient, and Web Vitals friendly.</p>
+            <h1>The Defer.js (<code>@shinsenter/defer.js</code>)</h1>
+            <p>🥇 A JavaScript micro-library that helps you lazy load (almost) anything. Defer.js is zero-dependency, super-efficient, and Web Vitals friendly.</p>
             <div class="demo-addthis addthis_inline_share_toolbox"></div>
         </header>
 
@@ -34,7 +32,7 @@ <h1><code>@shinsenter/defer.js</code></h1>
             <h2>Get started:</h2>
 
             <div class="helper">
-                See how easy getting defer.js works on your website!
+                See how easy getting Defer.js works on your website!
             </div>
 
             <div class="example">
@@ -42,18 +40,18 @@ <h3>Quick installation:</h3>
                 <div class="helper">
                     Just put a <code>&lt;script&gt;</code> tag pointing to
                     <a target="_blank" title="defer.min.js"
-                        href="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer.min.js">the library URL</a>
+                        href="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/defer.min.js">the library URL</a>
                     just below the opening <code>&lt;head&gt;</code> tag of your page.
                     Because <code>defer.min.js</code> is optimized to a very tiny file size,
                     you can even inline entire the library to save one HTTP request.
                 </div>
                 <div class="demo">
 <!-- Copy the script from the below URL -->
-<!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer.min.js -->
+<!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/defer.min.js -->
 <script>/* then replace this comment block with the content of defer.min.js here */</script>
 
 <!-- If legacy browsers like Internet Explorer 9 still need to be supported -->
-<script>'IntersectionObserver'in window||document.write('<script defer src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/polyfill.min.js"><\/script>');</script>
+<script>'IntersectionObserver'in window||document.write('<script defer src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/polyfill.min.js"><\/script>');</script>
                 </div>
             </div>
         </section>
@@ -90,7 +88,7 @@ <h3>Using magic <mark><code>type="deferjs"</code></mark> attribute:</h3>
 <script type="deferjs">
     // your JavaScript will still be here,
     // but it will not run unless the user starts interacting with your page.
-    console.log('This script is lazy loaded with type="deferjs" attribute.');
+    console.info('This script is lazy loaded with type="deferjs" attribute.');
 </script>
                 </div>
             </div>
@@ -101,11 +99,11 @@ <h3>Using your value for the type attribute, such as <mark><code>type="my-magic"
                     If you hate using the <mark><code>type="deferjs"</code></mark> attribute,
                     you can even choose yours.
                     <br>
-                    <code>Defer.all(cssSelector, [delay], [waitForInteraction])</code>
+                    <code>Defer.all(cssSelector, [delay], [waitForUserAction])</code>
                     <br>
                     <strong>Note: </strong>
                     Lazy loading behavior changed since v3.0
-                    when you set <code>Defer.lazy=true</code> or <code>waitForInteraction=true</code>. <br>
+                    when you set <code>Defer.lazy=true</code> or <code>waitForUserAction=true</code>. <br>
                     <code>&lt;script&gt;</code> tags deferred with this technique
                     will not execute unless the user starts interacting with your page.
                     <br>
@@ -133,7 +131,7 @@ <h3>Using your value for the type attribute, such as <mark><code>type="my-magic"
             </div>
 
             <div class="example">
-                <h3>Using <code>Defer.all</code> with script tags with <code>src</code> attribute:</h3>
+                <h3>Using the <code>Defer.all()</code> method for script tags with <code>src</code> attribute:</h3>
                 <div class="helper">
                     Your scripts will work perfectly when mixing inline scripts
                     and script tags with an <code>src</code> attribute,
@@ -157,7 +155,7 @@ <h3>Using <code>Defer.all</code> with script tags with <code>src</code> attribut
         </section>
 
         <section>
-            <h2><code>Defer(functionRef, [delay], [waitForInteraction])</code></h2>
+            <h2><code>Defer(functionRef, [delay], [waitForUserAction])</code></h2>
 
             <div class="helper">
                 Heavy DOM manipulations may cause render-blocking issues in real scenarios.
@@ -182,6 +180,8 @@ <h3>Basic usage:</h3>
             code.children().text(html);
             demo.append(code);
         });
+
+        console.info('Demo code blocks on this page are inserted.');
     }
 
     Defer(generate_code_blocks, 0);
@@ -225,14 +225,14 @@ <h3>Wait until the user starts interacting:</h3>
             </div>
 
             <div class="example">
-                <h3>The variable <code>Defer.lazy</code></h3>
+                <h3>The variable the <code>Defer.lazy()</code> method</h3>
                 <div class="helper">
                     Setting <code>Defer.lazy=true</code> tells the library
                     to delay the execution of deferred scripts when the user
                     starts interacting with the page regardless of the page load event.
                     <br>
-                    It will override the <code>waitForInteraction</code> argument
-                    in the <code>Defer()</code> function.
+                    It will override the <code>waitForUserAction</code> argument
+                    in the <code>Defer()</code> method.
                 </div>
                 <div class="demo">
 <script>/* the script tag containing defer.min.js is here */</script>
@@ -271,16 +271,16 @@ <h3>For general using the <mark><code>data-src</code></mark> attribute:</h3>
             </div>
 
             <div class="example">
-                <h3>For general using class name (E.g: <mark><code>class="lazy"</code></mark>):</h3>
+                <h3>For general using class name (E.g: <mark><code>class="lazi"</code></mark>):</h3>
                 <div class="helper">
                     <code>&lt;template&gt;</code> tag in this example may be <code>&lt;img&gt;</code>, <code>&lt;iframe&gt;</code>, etc. in real scenarios.
                 </div>
                 <div class="demo">
-<template class="lazy"
+<template class="lazi"
     data-src="example.com"
     data-title="This attribute will be copied to title attribute."></template>
 <script>
-    Defer.dom('.lazy', 50, 'Lazy loaded');
+    Defer.dom('.lazi', 50, 'lazy-loaded');
 </script>
                 </div>
             </div>
@@ -303,7 +303,6 @@ <h3>Basic usage:</h3>
 <div id="demo-basic">
     <img alt="A lazy image"
         width="200" height="300" loading="lazy"
-        src=""
         data-src="https://picsum.photos/id/1003/200/300">
     <img alt="A lazy image with a low-resolution placeholder"
         width="200" height="300" loading="lazy"
@@ -374,7 +373,7 @@ <h3>Lazy load a responsive image with flexible format selection:</h3>
             <div class="example">
                 <h3>Basic usage with adding CSS class:</h3>
                 <div class="helper">
-                    <code>Defer.dom</code> also allows you to add CSS class names when a node is unveiled.
+                    the <code>Defer.dom()</code> method also allows you to add CSS class names when a node is unveiled.
                     <br>
                     In this example, we will add some CSS class names to make the <code>img</code> tag animate.
                 </div>
@@ -457,7 +456,7 @@ <h3>Lazy load CSS background images:</h3>
             <div class="example">
                 <h3>Lazy load a video:</h3>
                 <div class="helper">
-                    With <code>Defer.dom</code>, we can also defer the load of various media tags, such as a <code>video</code> tag.
+                    With the <code>Defer.dom()</code> method, we can also defer the load of various media tags, such as a <code>video</code> tag.
                 </div>
                 <div class="demo">
 <div id="demo-video">
@@ -477,7 +476,7 @@ <h3>Lazy load a video:</h3>
             <div class="example">
                 <h3>Lazy load an iframe:</h3>
                 <div class="helper">
-                    With <code>Defer.dom</code>, we can effortlessly defer the load of <code>iframe</code> tags.
+                    With the <code>Defer.dom()</code> method, we can effortlessly defer the load of <code>iframe</code> tags.
                 </div>
                 <div class="demo">
 <div id="demo-iframe">
@@ -488,7 +487,7 @@ <h3>Lazy load an iframe:</h3>
     </iframe>
 </div>
 <script>
-    Defer.dom('#demo-iframe iframe', 0, 'animate__animated animate__fadeIn');
+    Defer.dom('#demo-iframe iframe', 0, 'iframe-loaded');
 </script>
                 </div>
             </div>
@@ -496,7 +495,7 @@ <h3>Lazy load an iframe:</h3>
             <div class="example">
                 <h3>Lazy load a Youtube video:</h3>
                 <div class="helper">
-                    This example uses <code>Defer.dom</code> to defer a load of a Youtube iframe.
+                    This example uses the <code>Defer.dom()</code> method to defer a load of a Youtube iframe.
                 </div>
                 <div class="demo">
 <div id="demo-youtube">
@@ -509,7 +508,7 @@ <h3>Lazy load a Youtube video:</h3>
     </iframe>
 </div>
 <script>
-    Defer.dom('#demo-youtube iframe', 0, 'animate__animated animate__fadeIn');
+    Defer.dom('#demo-youtube iframe', 0, 'youtube-loaded');
 </script>
                 </div>
             </div>
@@ -517,7 +516,7 @@ <h3>Lazy load a Youtube video:</h3>
             <div class="example">
                 <h3>Lazy load a Facebook post:</h3>
                 <div class="helper">
-                    This example uses <code>Defer.dom</code> to defer a load of a Facebook post.
+                    This example uses the <code>Defer.dom()</code> method to defer a load of a Facebook post.
                 </div>
                 <div class="demo">
 <div id="demo-facebook">
@@ -529,7 +528,7 @@ <h3>Lazy load a Facebook post:</h3>
     </iframe>
 </div>
 <script>
-    Defer.dom('#demo-facebook iframe', 0, 'animate__animated animate__fadeIn');
+    Defer.dom('#demo-facebook iframe', 0, 'facebook-loaded');
 </script>
                 </div>
             </div>
@@ -537,7 +536,7 @@ <h3>Lazy load a Facebook post:</h3>
             <div class="example">
                 <h3>Lazy load a Discord chat box:</h3>
                 <div class="helper">
-                    This example uses <code>Defer.dom</code> to defer a load of a Discord chat box.
+                    This example uses the <code>Defer.dom()</code> method to defer a load of a Discord chat box.
                 </div>
                 <div class="demo">
 <iframe id="discord-widget" title="Discord"
@@ -556,7 +555,7 @@ <h3>Lazy load a Discord chat box:</h3>
             <div class="example">
                 <h3>Scroll and reveal:</h3>
                 <div class="helper">
-                    <code>Defer.dom</code> also helps you to do an action when an element is unveiled.
+                    the <code>Defer.dom()</code> method also helps you to do an action when an element is unveiled.
                     <br>
                     With the below example, when you scroll to the bottom of this page,
                     you will see a message as soon as a tag with <code>id="surprise-me"</code> appears.
@@ -564,7 +563,7 @@ <h3>Scroll and reveal:</h3>
                 <div class="demo">
 <script>
     Defer.dom('#surprise-me', 1000, 'seen', function(node) {
-        alert('Yay!\n\nYou have seen all examples.\nHave fun coding with @shinsenter/defer.js!');
+        alert('Yay!\n\nYou have seen all examples.\nHave fun with Defer.js!');
     });
 </script>
                 </div>
@@ -572,21 +571,21 @@ <h3>Scroll and reveal:</h3>
         </section>
 
         <section>
-            <h2><code>Defer.css(fileUrl, [id], [delay], [onload], [waitForInteraction])</code></h2>
+            <h2><code>Defer.css(fileUrl, [id], [delay], [onload], [waitForUserAction])</code></h2>
 
             <div class="helper">
-                We use <code>Defer.css</code> to defer a load of external CSS files without blocking the page rendering.
+                We use the <code>Defer.css()</code> method to defer a load of external CSS files without blocking the page rendering.
                 <br>
                 <strong>Note: </strong>
                 Lazy loading behavior changed since v3.0
-                when you set <code>Defer.lazy=true</code> or <code>waitForInteraction=true</code>. <br>
+                when you set <code>Defer.lazy=true</code> or <code>waitForUserAction=true</code>. <br>
                 The <code>fileUrl</code> will not be fetched unless the user starts interacting with your page.
             </div>
 
             <div class="example">
                 <h3>Lazy load FontAwesome library:</h3>
                 <div class="helper">
-                    Using <code>Defer.css</code> to lazy load FontAwesome (CSS and some font files).
+                    Using the <code>Defer.css()</code> method to lazy load FontAwesome (CSS and some font files).
                 </div>
                 <div class="demo">
 <style>
@@ -639,27 +638,27 @@ <h3>Lazy load animate.css library:</h3>
         </section>
 
         <section>
-            <h2><code>Defer.js(fileUrl, [id], [delay], [onload], [waitForInteraction])</code></h2>
+            <h2><code>Defer.js(fileUrl, [id], [delay], [onload], [waitForUserAction])</code></h2>
 
             <div class="helper">
-                We use <code>Defer.js</code> to defer a load of 3rd-party JavaScript libraries, add-ons etc. without blocking the page rendering.
+                We use the <code>Defer.js()</code> method to defer a load of 3rd-party JavaScript libraries, add-ons etc. without blocking the page rendering.
                 <br>
                 <strong>Note 1: </strong>
-                Because the download of a file using <code>Defer.js</code> function is asynchronous,
-                to avoid dependency error when lazy loading a library using <code>Defer.js</code>,
+                Because the download of a file using the <code>Defer.js()</code> method is asynchronous,
+                to avoid dependency error when lazy loading a library using the <code>Defer.js()</code> method,
                 it is highly recommended that the <code>onload</code> callback function be used to make sure that
                 the third-party library you needed is completely defined.
                 <br>
                 <strong>Note 2: </strong>
                 Lazy loading behavior changed since v3.0
-                when you set <code>Defer.lazy=true</code> or <code>waitForInteraction=true</code>. <br>
+                when you set <code>Defer.lazy=true</code> or <code>waitForUserAction=true</code>. <br>
                 The <code>fileUrl</code> will not be fetched unless the user starts interacting with your page.
             </div>
 
             <div class="example">
                 <h3>An alternative way to lazy load Google Tag Manager script:</h3>
                 <div class="helper">
-                    Using <code>Defer.js</code> to lazy load Google Tag Manager library and its external scripts.
+                    Using the <code>Defer.js()</code> method to lazy load Google Tag Manager library and its external scripts.
                 </div>
                 <div class="demo">
 <script>
@@ -670,7 +669,7 @@ <h3>An alternative way to lazy load Google Tag Manager script:</h3>
 
     // Lazy loads the GTM library
     // in this example, we want the GTM to execute as soon as the page is loaded
-    // so the waitForInteraction argument (the last argument) is set to false.
+    // so the waitForUserAction argument (the last argument) is set to false.
     Defer.js('https://www.googletagmanager.com/gtag/js?id=' + GTM_ID, 'google-tag', 0, function() {
         console.info('Google Tag Manager is loaded.'); // debug
     }, false);
@@ -681,7 +680,7 @@ <h3>An alternative way to lazy load Google Tag Manager script:</h3>
             <div class="example">
                 <h3>Lazy load AddThis add-on:</h3>
                 <div class="helper">
-                    Using <code>Defer.js</code> to lazy load AddThis add-on and its assets.
+                    Using the <code>Defer.js()</code> method to lazy load AddThis add-on and its assets.
                     <br>
                     AddThis add-on will not be loaded until the user starts interacting with the page.
                 </div>
@@ -701,7 +700,7 @@ <h3>Lazy load AddThis add-on:</h3>
             <div class="example">
                 <h3>Lazy load Prism.js library:</h3>
                 <div class="helper">
-                    Using <code>Defer.js</code> to lazy load Prism.js library and its assets.
+                    Using the <code>Defer.js()</code> method to lazy load Prism.js library and its assets.
                     <br>
                     The <code>"Code:"</code> blocks on this page will be rendered only when you scroll to their positions.
                 </div>
@@ -719,13 +718,13 @@ <h3>Lazy load Prism.js library:</h3>
 
     // this script will lazy load Prism.js library and its dark theme.
     // when loading is done, it will apply code formatting to every <code> tag.
-    var origin = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0';
+    var origin = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0';
     Defer.css(origin + '/themes/prism-tomorrow.min.css', 'prism-css');
     Defer.js(origin + '/prism.min.js', 'prism-js', 0, function () {
-        console.info('Prism.js is loaded.'); // debug
-
         // enables code highlighting for code tags using Defer.dom()
         Defer.dom('pre code', 100, 'ide-loaded', Prism.highlightElement, {rootMargin: "120%"});
+
+        console.info('Prism.js is loaded.'); // debug
     });
 </script>
                 </div>
@@ -735,13 +734,13 @@ <h3>Lazy load Prism.js library:</h3>
         <hr>
 
         <footer id="surprise-me">
-            <p>Have fun coding with <a href="https://code.shin.company/defer.js" title="@shinsenter/defer.js">@shinsenter/defer.js</a>!</p>
+            <p>Have fun with <a href="https://code.shin.company/defer.js" title="@shinsenter/defer.js">@shinsenter/defer.js</a>!</p>
         </footer>
     </main>
 
     <!-- Dummy -->
-    <script>Defer.all('[type="waterfall-test-defer"]', 0, false);</script>
-    <script>Defer.all('[type="waterfall-test-lazy"]',  0, true);</script>
+    <script>Defer.all('script[type="waterfall-test-defer"]', 10, false);</script>
+    <script>Defer.all('script[type="waterfall-test-lazy"]',  10, true);</script>
     <script type="waterfall-test-defer" src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.38/vue.cjs.js"></script>
     <script type="waterfall-test-defer" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
     <script type="waterfall-test-defer" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
@@ -779,7 +778,7 @@ <h3>Lazy load Prism.js library:</h3>
     <script type="waterfall-test-lazy" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
     <script type="waterfall-test-lazy" src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.1.6/mermaid.min.js"></script>
     <script type="waterfall-test-lazy" defer crossorigin="anonymous" referrerpolicy="no-referrer"
-        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js"
+        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.slim.min.js"
         integrity="sha512-6ORWJX/LrnSjBzwefdNUyLCMTIsGoNP6NftMy2UAm1JBm6PRZCO1d7OHBStWpVFZLO+RerTvqX/Z9mBFfCJZ4A=="></script>
 </body>
 
diff --git a/dist/defer.min.js b/dist/defer.min.js
index d6cfce2..d15a5e0 100644
--- a/dist/defer.min.js
+++ b/dist/defer.min.js
@@ -1,2 +1,2 @@
-/*!@shinsenter/defer.js@3.3.0*/
-!(function(n){var t,u="Defer",i=n.document||n,o=n.setTimeout,s=n.IntersectionObserver,c=/p/.test(i.readyState),r=[],a=[],f=r.slice,l="load",e="pageshow",d=["mousemove","keydown","touchstart","wheel"],m="on"+e in n?e:l,h="crossorigin",p="integrity",v="forEach",y="getAttribute",g="setAttribute",b="shift",E="link",w="script";function x(e){n.addEventListener(e,t)}function A(e){n.removeEventListener(e,t)}function I(e,n,t){c?o(e,n):(void 0===t&&I.lazy||t?a:r).push(e,n)}function N(e){i.head.appendChild(e)}function j(e,n){f.call(e.attributes)[v](n)}function k(e,n,t,o){return o=(n?i.getElementById(n):o)||i.createElement(e),n&&(o.id=n),t&&(o.onload=t),o}function C(e,n,t){(n=e.src)&&((t=k(E)).rel="preload",t.as=w,t.href=n,(n=e[y](h))&&t[g](h,n),(n=e[y](p))&&t[g](p,n),N(t))}function L(e,n){e.parentNode.replaceChild(n,e)}function S(e,n){return f.call((n||i).querySelectorAll(e))}function q(t,e){S("source,img",t)[v](q),j(t,function(e,n){(n=/^data-(.+)/.exec(e.name))&&t[g](n[1],e.value)}),"string"==typeof e&&e&&(t.className+=" "+e),l in t&&t[l]()}function z(e,n,t){I(function(t){(t=S(e||"[type=deferjs]"))[v](C),(function o(e,n){(e=t[b]())&&((n=k(e.nodeName)).text=e.text,j(e,function(e){"type"!=e.name&&n[g](e.name,e.value)}),n.src&&!n[y]("async")?(n.onload=n.onerror=o,L(e,n)):(L(e,n),o()))})()},n,t)}t=function(e,n){for(n=m==e.type?(A(m),c=I,d[v](x),r):(d[v](A),a);n[0];)o(n[b](),n[b]())},c||x(m),z(),I.all=z,I.dom=function(e,n,i,c,r){I(function(t){function o(e){c&&!1===c(e)||q(e,i)}t=!!s&&new s(function(e){e[v](function(e,n){e.isIntersecting&&(t.unobserve(n=e.target),o(n))})},r),S(e||"[data-src]")[v](function(e){e[u]!=I&&(e[u]=I,t?t.observe(e):o(e))})},n,!1)},I.css=function(n,t,e,o,i){I(function(e){(e=k(E,t,o)).rel="stylesheet",e.href=n,N(e)},e,i)},I.js=function(n,t,e,o,i){I(function(e){(e=k(w,t,o)).src=n,N(e)},e,i)},I.reveal=q,n[u]=I})(this);
\ No newline at end of file
+/*!@shinsenter/defer.js@3.4.0*/
+!(function(n){function t(e){n.addEventListener(e,B)}function o(e){n.removeEventListener(e,B)}function u(e,n,t){L?C(e,n):(t||u.lazy&&void 0===t?q:S).push(e,n)}function c(e){k.head.appendChild(e)}function i(e,n){z.call(e.attributes)[y](n)}function r(e,n,t,o){return o=(n?k.getElementById(n):o)||k.createElement(e),n&&(o.id=n),t&&(o.onload=t),o}function s(e,n,t){(t=e.src)&&((n=r(m)).rel="preload",n.as=h,n.href=t,(t=e[g](w))&&n[b](w,t),(t=e[g](x))&&n[b](x,t),c(n))}function a(e,n){return z.call((n||k).querySelectorAll(e))}function f(e,n){e.parentNode.replaceChild(n,e)}function l(t,e){a("source,img",t)[y](l),i(t,function(e,n){(n=/^data-(.+)/.exec(e.name))&&t[b](n[1],e.value)}),"string"==typeof e&&e&&(t.className+=" "+e),p in t&&t[p]()}function e(e,n,t){u(function(t){(t=a(e||N))[y](s),(function o(e,n){(e=t[E]())&&((n=r(e.nodeName)).text=e.text,i(e,function(e){"type"!=e.name&&n[b](e.name,e.value)}),n.src&&!n[g]("async")?(n.onload=n.onerror=o,f(e,n)):(f(e,n),o()))})()},n,t)}var d="Defer",m="link",h="script",p="load",v="pageshow",y="forEach",g="getAttribute",b="setAttribute",E="shift",w="crossorigin",x="integrity",A=["mousemove","keydown","touchstart","wheel"],I="on"+v in n?v:p,N=h+"[type=deferjs]",j=n.IntersectionObserver,k=n.document||n,C=n.setTimeout,L=/p/.test(k.readyState),S=[],q=[],z=S.slice,B=function(e,n){for(n=I==e.type?(o(I),L=u,A[y](t),S):(A[y](o),q);n[0];)C(n[E](),n[E]())};e(),u.all=e,u.dom=function(e,n,i,c,r){u(function(t){function o(e){c&&!1===c(e)||l(e,i)}t=!!j&&new j(function(e){e[y](function(e,n){e.isIntersecting&&(t.unobserve(n=e.target),o(n))})},r),a(e||"[data-src]")[y](function(e){e[d]!=u&&(e[d]=u,t?t.observe(e):o(e))})},n,!1)},u.css=function(n,t,e,o,i){u(function(e){(e=r(m,t,o)).rel="stylesheet",e.href=n,c(e)},e,i)},u.js=function(n,t,e,o,i){u(function(e){(e=r(h,t,o)).src=n,c(e)},e,i)},u.reveal=l,n[d]=u,L||t(I)})(this);
\ No newline at end of file
diff --git a/dist/defer_plus.min.js b/dist/defer_plus.min.js
index c57918f..f83a8f4 100644
--- a/dist/defer_plus.min.js
+++ b/dist/defer_plus.min.js
@@ -1,2 +1,2 @@
-/*!@shinsenter/defer.js@3.3.0*/
-!(function(n){var t,s="Defer",i=n.document||n,o=n.setTimeout,f=n.IntersectionObserver,r=/p/.test(i.readyState),c=[],u=[],a=c.slice,l="load",e="pageshow",d=["mousemove","keydown","touchstart","wheel"],m="on"+e in n?e:l,h="crossorigin",p="integrity",y="forEach",v="getAttribute",g="setAttribute",b="shift",E="link",w="script";function j(e){n.addEventListener(e,t)}function x(e){n.removeEventListener(e,t)}function A(e,n,t){r?o(e,n):(void 0===t&&A.lazy||t?u:c).push(e,n)}function I(e){i.head.appendChild(e)}function N(e,n){a.call(e.attributes)[y](n)}function k(e,n,t,o){return o=(n?i.getElementById(n):o)||i.createElement(e),n&&(o.id=n),t&&(o.onload=t),o}function C(e,n,t){(n=e.src)&&((t=k(E)).rel="preload",t.as=w,t.href=n,(n=e[v](h))&&t[g](h,n),(n=e[v](p))&&t[g](p,n),I(t))}function D(e,n){e.parentNode.replaceChild(n,e)}function L(e,n){return a.call((n||i).querySelectorAll(e))}function S(t,e){L("source,img",t)[y](S),N(t,function(e,n){(n=/^data-(.+)/.exec(e.name))&&t[g](n[1],e.value)}),"string"==typeof e&&e&&(t.className+=" "+e),l in t&&t[l]()}function q(e,n,t){A(function(t){(t=L(e||"[type=deferjs]"))[y](C),(function o(e,n){(e=t[b]())&&((n=k(e.nodeName)).text=e.text,N(e,function(e){"type"!=e.name&&n[g](e.name,e.value)}),n.src&&!n[v]("async")?(n.onload=n.onerror=o,D(e,n)):(D(e,n),o()))})()},n,t)}t=function(e,n){for(n=m==e.type?(x(m),r=A,d[y](j),c):(d[y](x),u);n[0];)o(n[b](),n[b]())},r||j(m),q(),A.all=q,A.dom=function(e,n,i,r,c){A(function(t){function o(e){r&&!1===r(e)||S(e,i)}t=!!f&&new f(function(e){e[y](function(e,n){e.isIntersecting&&(t.unobserve(n=e.target),o(n))})},c),L(e||"[data-src]")[y](function(e){e[s]!=A&&(e[s]=A,t?t.observe(e):o(e))})},n,!1)},A.css=function(n,t,e,o,i){A(function(e){(e=k(E,t,o)).rel="stylesheet",e.href=n,I(e)},e,i)},A.js=function(n,t,e,o,i){A(function(e){(e=k(w,t,o)).src=n,I(e)},e,i)},A.reveal=S,n[s]=A})(this),(function(e,n){n=e.defer=e.Defer,e.deferimg=e.deferiframe=n.dom,e.deferstyle=n.css,e.deferscript=n.js})(this);
\ No newline at end of file
+/*!@shinsenter/defer.js@3.4.0*/
+!(function(n){function t(e){n.addEventListener(e,z)}function o(e){n.removeEventListener(e,z)}function s(e,n,t){D?C(e,n):(t||s.lazy&&void 0===t?S:L).push(e,n)}function r(e){k.head.appendChild(e)}function i(e,n){q.call(e.attributes)[v](n)}function c(e,n,t,o){return o=(n?k.getElementById(n):o)||k.createElement(e),n&&(o.id=n),t&&(o.onload=t),o}function f(e,n,t){(t=e.src)&&((n=c(m)).rel="preload",n.as=h,n.href=t,(t=e[g](w))&&n[b](w,t),(t=e[g](j))&&n[b](j,t),r(n))}function u(e,n){return q.call((n||k).querySelectorAll(e))}function a(e,n){e.parentNode.replaceChild(n,e)}function l(t,e){u("source,img",t)[v](l),i(t,function(e,n){(n=/^data-(.+)/.exec(e.name))&&t[b](n[1],e.value)}),"string"==typeof e&&e&&(t.className+=" "+e),p in t&&t[p]()}function e(e,n,t){s(function(t){(t=u(e||I))[v](f),(function o(e,n){(e=t[E]())&&((n=c(e.nodeName)).text=e.text,i(e,function(e){"type"!=e.name&&n[b](e.name,e.value)}),n.src&&!n[g]("async")?(n.onload=n.onerror=o,a(e,n)):(a(e,n),o()))})()},n,t)}var d="Defer",m="link",h="script",p="load",y="pageshow",v="forEach",g="getAttribute",b="setAttribute",E="shift",w="crossorigin",j="integrity",x=["mousemove","keydown","touchstart","wheel"],A="on"+y in n?y:p,I=h+"[type=deferjs]",N=n.IntersectionObserver,k=n.document||n,C=n.setTimeout,D=/p/.test(k.readyState),L=[],S=[],q=L.slice,z=function(e,n){for(n=A==e.type?(o(A),D=s,x[v](t),L):(x[v](o),S);n[0];)C(n[E](),n[E]())};e(),s.all=e,s.dom=function(e,n,i,r,c){s(function(t){function o(e){r&&!1===r(e)||l(e,i)}t=!!N&&new N(function(e){e[v](function(e,n){e.isIntersecting&&(t.unobserve(n=e.target),o(n))})},c),u(e||"[data-src]")[v](function(e){e[d]!=s&&(e[d]=s,t?t.observe(e):o(e))})},n,!1)},s.css=function(n,t,e,o,i){s(function(e){(e=c(m,t,o)).rel="stylesheet",e.href=n,r(e)},e,i)},s.js=function(n,t,e,o,i){s(function(e){(e=c(h,t,o)).src=n,r(e)},e,i)},s.reveal=l,n[d]=s,D||t(A)})(this),(function(e,n){n=e.defer=e.Defer,e.deferimg=e.deferiframe=n.dom,e.deferstyle=n.css,e.deferscript=n.js})(this);
\ No newline at end of file
diff --git a/dist/polyfill.min.js b/dist/polyfill.min.js
index a946831..8231333 100644
--- a/dist/polyfill.min.js
+++ b/dist/polyfill.min.js
@@ -1 +1 @@
-!(function(){"use strict";var g,n,m,_;function r(t){try{return t.defaultView&&t.defaultView.frameElement||null}catch(e){return null}}function u(t){this.time=t.time,this.target=t.target,this.rootBounds=o(t.rootBounds),this.boundingClientRect=o(t.boundingClientRect),this.intersectionRect=o(t.intersectionRect||a()),this.isIntersecting=!!t.intersectionRect;var t=this.boundingClientRect,t=t.width*t.height,e=this.intersectionRect;this.intersectionRatio=t?Number((e.width*e.height/t).toFixed(4)):this.isIntersecting?1:0}function t(t,e){var n,o,i,e=e||{};if("function"!=typeof t)throw new Error("callback must be a function");if(e.root&&1!=e.root.nodeType&&9!=e.root.nodeType)throw new Error("root must be a Document or Element");this._checkForIntersections=(n=this._checkForIntersections.bind(this),o=this.THROTTLE_TIMEOUT,i=null,function(){i=i||setTimeout(function(){n(),i=null},o)}),this._callback=t,this._observationTargets=[],this._queuedEntries=[],this._rootMarginValues=this._parseRootMargin(e.rootMargin),this.thresholds=this._initThresholds(e.threshold),this.root=e.root||null,this.rootMargin=this._rootMarginValues.map(function(t){return t.value+t.unit}).join(" "),this._monitoringDocuments=[],this._monitoringUnsubscribes=[]}function s(t,e,n,o){"function"==typeof t.addEventListener?t.addEventListener(e,n,o||!1):"function"==typeof t.attachEvent&&t.attachEvent("on"+e,n)}function h(t,e,n,o){"function"==typeof t.removeEventListener?t.removeEventListener(e,n,o||!1):"function"==typeof t.detachEvent&&t.detachEvent("on"+e,n)}function b(t){var e;try{e=t.getBoundingClientRect()}catch(n){}return e?e.width&&e.height?e:{top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.right-e.left,height:e.bottom-e.top}:a()}function a(){return{top:0,bottom:0,left:0,right:0,width:0,height:0}}function o(t){return!t||"x"in t?t:{top:t.top,y:t.top,bottom:t.bottom,left:t.left,x:t.left,right:t.right,width:t.width,height:t.height}}function w(t,e){var n=e.top-t.top,t=e.left-t.left;return{top:n,left:t,height:e.height,width:e.width,bottom:n+e.height,right:t+e.width}}function i(t,e){for(var n=e;n;){if(n==t)return!0;n=v(n)}return!1}function v(t){var e=t.parentNode;return 9==t.nodeType&&t!=g?r(t):(e=e&&e.assignedSlot?e.assignedSlot.parentNode:e)&&11==e.nodeType&&e.host?e.host:e}function c(t){return t&&9===t.nodeType}"object"==typeof window&&("IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype?"isIntersecting"in window.IntersectionObserverEntry.prototype||Object.defineProperty(window.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return 0<this.intersectionRatio}}):(g=(function(){for(var t=window.document,e=r(t);e;)e=r(t=e.ownerDocument);return t})(),n=[],_=m=null,t.prototype.THROTTLE_TIMEOUT=100,t.prototype.POLL_INTERVAL=null,t.prototype.USE_MUTATION_OBSERVER=!0,t._setupCrossOriginUpdater=function(){return m=m||function(t,e){_=t&&e?w(t,e):a(),n.forEach(function(t){t._checkForIntersections()})}},t._resetCrossOriginUpdater=function(){_=m=null},t.prototype.observe=function(e){if(!this._observationTargets.some(function(t){return t.element==e})){if(!e||1!=e.nodeType)throw new Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:e,entry:null}),this._monitorIntersections(e.ownerDocument),this._checkForIntersections()}},t.prototype.unobserve=function(e){this._observationTargets=this._observationTargets.filter(function(t){return t.element!=e}),this._unmonitorIntersections(e.ownerDocument),0==this._observationTargets.length&&this._unregisterInstance()},t.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorAllIntersections(),this._unregisterInstance()},t.prototype.takeRecords=function(){var t=this._queuedEntries.slice();return this._queuedEntries=[],t},t.prototype._initThresholds=function(t){t=t||[0];return(t=Array.isArray(t)?t:[t]).sort().filter(function(t,e,n){if("number"!=typeof t||isNaN(t)||t<0||1<t)throw new Error("threshold must be a number between 0 and 1 inclusively");return t!==n[e-1]})},t.prototype._parseRootMargin=function(t){t=(t||"0px").split(/\s+/).map(function(t){t=/^(-?\d*\.?\d+)(px|%)$/.exec(t);if(t)return{value:parseFloat(t[1]),unit:t[2]};throw new Error("rootMargin must be specified in pixels or percent")});return t[1]=t[1]||t[0],t[2]=t[2]||t[0],t[3]=t[3]||t[1],t},t.prototype._monitorIntersections=function(e){var n,o,i,t=e.defaultView;t&&-1==this._monitoringDocuments.indexOf(e)&&(n=this._checkForIntersections,i=o=null,this.POLL_INTERVAL?o=t.setInterval(n,this.POLL_INTERVAL):(s(t,"resize",n,!0),s(e,"scroll",n,!0),this.USE_MUTATION_OBSERVER&&"MutationObserver"in t&&(i=new t.MutationObserver(n)).observe(e,{attributes:!0,childList:!0,characterData:!0,subtree:!0})),this._monitoringDocuments.push(e),this._monitoringUnsubscribes.push(function(){var t=e.defaultView;t&&(o&&t.clearInterval(o),h(t,"resize",n,!0)),h(e,"scroll",n,!0),i&&i.disconnect()}),e!=(this.root&&(this.root.ownerDocument||this.root)||g)&&(t=r(e))&&this._monitorIntersections(t.ownerDocument))},t.prototype._unmonitorIntersections=function(o){var i,t,e=this._monitoringDocuments.indexOf(o);-1!=e&&(i=this.root&&(this.root.ownerDocument||this.root)||g,this._observationTargets.some(function(t){if((e=t.element.ownerDocument)==o)return!0;for(;e&&e!=i;){var e,n=r(e);if((e=n&&n.ownerDocument)==o)return!0}return!1})||(t=this._monitoringUnsubscribes[e],this._monitoringDocuments.splice(e,1),this._monitoringUnsubscribes.splice(e,1),t(),o!=i&&(e=r(o))&&this._unmonitorIntersections(e.ownerDocument)))},t.prototype._unmonitorAllIntersections=function(){var t=this._monitoringUnsubscribes.slice(0);this._monitoringDocuments.length=0;for(var e=this._monitoringUnsubscribes.length=0;e<t.length;e++)t[e]()},t.prototype._checkForIntersections=function(){var h,c;!this.root&&m&&!_||(h=this._rootIsInDom(),c=h?this._getRootRect():a(),this._observationTargets.forEach(function(t){var e=t.element,n=b(e),o=this._rootContainsTarget(e),i=t.entry,r=h&&o&&this._computeTargetAndRootIntersection(e,n,c),s=null,t=(this._rootContainsTarget(e)?m&&!this.root||(s=c):s=a(),t.entry=new u({time:window.performance&&performance.now&&performance.now(),target:e,boundingClientRect:n,rootBounds:s,intersectionRect:r}));i?h&&o?this._hasCrossedThreshold(i,t)&&this._queuedEntries.push(t):i&&i.isIntersecting&&this._queuedEntries.push(t):this._queuedEntries.push(t)},this),this._queuedEntries.length&&this._callback(this.takeRecords(),this))},t.prototype._computeTargetAndRootIntersection=function(t,e,n){if("none"!=window.getComputedStyle(t).display){for(var o,i,r,s,h=e,c=v(t),u=!1;!u&&c;){var a,l,p,f=null,d=1==c.nodeType?window.getComputedStyle(c):{};if("none"==d.display)return null;if(c==this.root||9==c.nodeType?(u=!0,c==this.root||c==g?m&&!this.root?!_||0==_.width&&0==_.height?h=f=c=null:f=_:f=n:(a=(p=v(c))&&b(p),l=p&&this._computeTargetAndRootIntersection(p,a,n),a&&l?(c=p,f=w(a,l)):h=c=null)):c!=(p=c.ownerDocument).body&&c!=p.documentElement&&"visible"!=d.overflow&&(f=b(c)),f&&(a=f,l=h,d=Math.max(a.top,l.top),f=Math.min(a.bottom,l.bottom),o=Math.max(a.left,l.left),s=f-d,h=0<=(r=(i=Math.min(a.right,l.right))-o)&&0<=s?{top:d,bottom:f,left:o,right:i,width:r,height:s}:null),!h)break;c=c&&v(c)}return h}},t.prototype._getRootRect=function(){var t,e=this.root&&!c(this.root)?b(this.root):(t=(e=c(this.root)?this.root:g).body,{top:0,left:0,right:(e=e.documentElement).clientWidth||t.clientWidth,width:e.clientWidth||t.clientWidth,bottom:e.clientHeight||t.clientHeight,height:e.clientHeight||t.clientHeight});return this._expandRectByRootMargin(e)},t.prototype._expandRectByRootMargin=function(n){var t=this._rootMarginValues.map(function(t,e){return"px"==t.unit?t.value:t.value*(e%2?n.width:n.height)/100}),t={top:n.top-t[0],right:n.right+t[1],bottom:n.bottom+t[2],left:n.left-t[3]};return t.width=t.right-t.left,t.height=t.bottom-t.top,t},t.prototype._hasCrossedThreshold=function(t,e){var n=t&&t.isIntersecting?t.intersectionRatio||0:-1,o=e.isIntersecting?e.intersectionRatio||0:-1;if(n!==o)for(var i=0;i<this.thresholds.length;i++){var r=this.thresholds[i];if(r==n||r==o||r<n!=r<o)return!0}},t.prototype._rootIsInDom=function(){return!this.root||i(g,this.root)},t.prototype._rootContainsTarget=function(t){var e=this.root&&(this.root.ownerDocument||this.root)||g;return i(e,t)&&(!this.root||e==t.ownerDocument)},t.prototype._registerInstance=function(){n.indexOf(this)<0&&n.push(this)},t.prototype._unregisterInstance=function(){var t=n.indexOf(this);-1!=t&&n.splice(t,1)},window.IntersectionObserver=t,window.IntersectionObserverEntry=u))})();
\ No newline at end of file
+!(function(){"use strict";function r(t){try{return t.defaultView&&t.defaultView.frameElement||null}catch(e){return null}}function u(t){this.time=t.time,this.target=t.target,this.rootBounds=o(t.rootBounds),this.boundingClientRect=o(t.boundingClientRect),this.intersectionRect=o(t.intersectionRect||a()),this.isIntersecting=!!t.intersectionRect;var e=this.boundingClientRect,n=this.intersectionRect;this.intersectionRatio=(e=e.width*e.height)?Number((n.width*n.height/e).toFixed(4)):this.isIntersecting?1:0}function t(t,e){var n,o,i,r=e||{};if("function"!=typeof t)throw new Error("callback must be a function");if(r.root&&1!=r.root.nodeType&&9!=r.root.nodeType)throw new Error("root must be a Document or Element");this._checkForIntersections=(n=this._checkForIntersections.bind(this),o=this.THROTTLE_TIMEOUT,i=null,function(){i=i||setTimeout(function(){n(),i=null},o)}),this._callback=t,this._observationTargets=[],this._queuedEntries=[],this._rootMarginValues=this._parseRootMargin(r.rootMargin),this.thresholds=this._initThresholds(r.threshold),this.root=r.root||null,this.rootMargin=this._rootMarginValues.map(function(t){return t.value+t.unit}).join(" "),this._monitoringDocuments=[],this._monitoringUnsubscribes=[]}function s(t,e,n,o){"function"==typeof t.addEventListener?t.addEventListener(e,n,o||!1):"function"==typeof t.attachEvent&&t.attachEvent("on"+e,n)}function h(t,e,n,o){"function"==typeof t.removeEventListener?t.removeEventListener(e,n,o||!1):"function"==typeof t.detachEvent&&t.detachEvent("on"+e,n)}function g(t){var e;try{e=t.getBoundingClientRect()}catch(n){}return e?e.width&&e.height?e:{top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.right-e.left,height:e.bottom-e.top}:a()}function a(){return{top:0,bottom:0,left:0,right:0,width:0,height:0}}function o(t){return!t||"x"in t?t:{top:t.top,y:t.top,bottom:t.bottom,left:t.left,x:t.left,right:t.right,width:t.width,height:t.height}}function m(t,e){var n=e.top-t.top,o=e.left-t.left;return{top:n,left:o,height:e.height,width:e.width,bottom:n+e.height,right:o+e.width}}function n(t,e){for(var n=e;n;){if(n==t)return!0;n=_(n)}return!1}function _(t){var e=t.parentNode;return 9==t.nodeType&&t!=b?r(t):(e=e&&e.assignedSlot?e.assignedSlot.parentNode:e)&&11==e.nodeType&&e.host?e.host:e}function i(t){return t&&9===t.nodeType}var b,c,w,v;"object"==typeof window&&("IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype?"isIntersecting"in window.IntersectionObserverEntry.prototype||Object.defineProperty(window.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return 0<this.intersectionRatio}}):(b=(function(){for(var t=window.document,e=r(t);e;)e=r(t=e.ownerDocument);return t})(),c=[],v=w=null,t.prototype.THROTTLE_TIMEOUT=100,t.prototype.POLL_INTERVAL=null,t.prototype.USE_MUTATION_OBSERVER=!0,t._setupCrossOriginUpdater=function(){return w=w||function(t,e){v=t&&e?m(t,e):a(),c.forEach(function(t){t._checkForIntersections()})}},t._resetCrossOriginUpdater=function(){v=w=null},t.prototype.observe=function(e){if(!this._observationTargets.some(function(t){return t.element==e})){if(!e||1!=e.nodeType)throw new Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:e,entry:null}),this._monitorIntersections(e.ownerDocument),this._checkForIntersections()}},t.prototype.unobserve=function(e){this._observationTargets=this._observationTargets.filter(function(t){return t.element!=e}),this._unmonitorIntersections(e.ownerDocument),0==this._observationTargets.length&&this._unregisterInstance()},t.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorAllIntersections(),this._unregisterInstance()},t.prototype.takeRecords=function(){var t=this._queuedEntries.slice();return this._queuedEntries=[],t},t.prototype._initThresholds=function(t){var e=t||[0];return(e=Array.isArray(e)?e:[e]).sort().filter(function(t,e,n){if("number"!=typeof t||isNaN(t)||t<0||1<t)throw new Error("threshold must be a number between 0 and 1 inclusively");return t!==n[e-1]})},t.prototype._parseRootMargin=function(t){var e=(t||"0px").split(/\s+/).map(function(t){var e=/^(-?\d*\.?\d+)(px|%)$/.exec(t);if(e)return{value:parseFloat(e[1]),unit:e[2]};throw new Error("rootMargin must be specified in pixels or percent")});return e[1]=e[1]||e[0],e[2]=e[2]||e[0],e[3]=e[3]||e[1],e},t.prototype._monitorIntersections=function(e){var n,o,i,t=e.defaultView;t&&-1==this._monitoringDocuments.indexOf(e)&&(n=this._checkForIntersections,i=o=null,this.POLL_INTERVAL?o=t.setInterval(n,this.POLL_INTERVAL):(s(t,"resize",n,!0),s(e,"scroll",n,!0),this.USE_MUTATION_OBSERVER&&"MutationObserver"in t&&(i=new t.MutationObserver(n)).observe(e,{attributes:!0,childList:!0,characterData:!0,subtree:!0})),this._monitoringDocuments.push(e),this._monitoringUnsubscribes.push(function(){var t=e.defaultView;t&&(o&&t.clearInterval(o),h(t,"resize",n,!0)),h(e,"scroll",n,!0),i&&i.disconnect()}),e!=(this.root&&(this.root.ownerDocument||this.root)||b)&&(t=r(e))&&this._monitorIntersections(t.ownerDocument))},t.prototype._unmonitorIntersections=function(o){var i,t,e=this._monitoringDocuments.indexOf(o);-1!=e&&(i=this.root&&(this.root.ownerDocument||this.root)||b,this._observationTargets.some(function(t){if((e=t.element.ownerDocument)==o)return!0;for(;e&&e!=i;){var e,n=r(e);if((e=n&&n.ownerDocument)==o)return!0}return!1})||(t=this._monitoringUnsubscribes[e],this._monitoringDocuments.splice(e,1),this._monitoringUnsubscribes.splice(e,1),t(),o!=i&&(e=r(o))&&this._unmonitorIntersections(e.ownerDocument)))},t.prototype._unmonitorAllIntersections=function(){var t=this._monitoringUnsubscribes.slice(0);this._monitoringDocuments.length=0;for(var e=this._monitoringUnsubscribes.length=0;e<t.length;e++)t[e]()},t.prototype._checkForIntersections=function(){var h,c;!this.root&&w&&!v||(h=this._rootIsInDom(),c=h?this._getRootRect():a(),this._observationTargets.forEach(function(t){var e=g(s=t.element),n=this._rootContainsTarget(s),o=t.entry,i=h&&n&&this._computeTargetAndRootIntersection(s,e,c),r=null,s=(this._rootContainsTarget(s)?w&&!this.root||(r=c):r=a(),t.entry=new u({time:window.performance&&performance.now&&performance.now(),target:s,boundingClientRect:e,rootBounds:r,intersectionRect:i}));o?h&&n?this._hasCrossedThreshold(o,s)&&this._queuedEntries.push(s):o&&o.isIntersecting&&this._queuedEntries.push(s):this._queuedEntries.push(s)},this),this._queuedEntries.length&&this._callback(this.takeRecords(),this))},t.prototype._computeTargetAndRootIntersection=function(t,e,n){if("none"!=window.getComputedStyle(t).display){for(var o,i,r,s,h=e,c=_(t),u=!1;!u&&c;){var a,l,p,f=null,d=1==c.nodeType?window.getComputedStyle(c):{};if("none"==d.display)return null;if(c==this.root||9==c.nodeType?(u=!0,c==this.root||c==b?w&&!this.root?!v||0==v.width&&0==v.height?h=f=c=null:f=v:f=n:(a=(p=_(c))&&g(p),l=p&&this._computeTargetAndRootIntersection(p,a,n),a&&l?(c=p,f=m(a,l)):h=c=null)):c!=(p=c.ownerDocument).body&&c!=p.documentElement&&"visible"!=d.overflow&&(f=g(c)),f&&(a=f,l=h,d=Math.max(a.top,l.top),f=Math.min(a.bottom,l.bottom),o=Math.max(a.left,l.left),s=f-d,h=0<=(r=(i=Math.min(a.right,l.right))-o)&&0<=s?{top:d,bottom:f,left:o,right:i,width:r,height:s}:null),!h)break;c=c&&_(c)}return h}},t.prototype._getRootRect=function(){var t,e=this.root&&!i(this.root)?g(this.root):(t=(e=i(this.root)?this.root:b).body,{top:0,left:0,right:(e=e.documentElement).clientWidth||t.clientWidth,width:e.clientWidth||t.clientWidth,bottom:e.clientHeight||t.clientHeight,height:e.clientHeight||t.clientHeight});return this._expandRectByRootMargin(e)},t.prototype._expandRectByRootMargin=function(n){var t=this._rootMarginValues.map(function(t,e){return"px"==t.unit?t.value:t.value*(e%2?n.width:n.height)/100});return(t={top:n.top-t[0],right:n.right+t[1],bottom:n.bottom+t[2],left:n.left-t[3]}).width=t.right-t.left,t.height=t.bottom-t.top,t},t.prototype._hasCrossedThreshold=function(t,e){var n=t&&t.isIntersecting?t.intersectionRatio||0:-1,o=e.isIntersecting?e.intersectionRatio||0:-1;if(n!==o)for(var i=0;i<this.thresholds.length;i++){var r=this.thresholds[i];if(r==n||r==o||r<n!=r<o)return!0}},t.prototype._rootIsInDom=function(){return!this.root||n(b,this.root)},t.prototype._rootContainsTarget=function(t){var e=this.root&&(this.root.ownerDocument||this.root)||b;return n(e,t)&&(!this.root||e==t.ownerDocument)},t.prototype._registerInstance=function(){c.indexOf(this)<0&&c.push(this)},t.prototype._unregisterInstance=function(){var t=c.indexOf(this);-1!=t&&c.splice(t,1)},window.IntersectionObserver=t,window.IntersectionObserverEntry=u))})();
\ No newline at end of file
diff --git a/docs/about.md b/docs/about.md
index 77437da..c4fb50b 100644
--- a/docs/about.md
+++ b/docs/about.md
@@ -1,6 +1,6 @@
 # Package @shinsenter/defer.js
 
-🥇 A JavaScript micro-library that helps you lazy load (almost) anything. It's zero-dependency, super-efficient, and Web Vitals friendly.
+🥇 A JavaScript micro-library that helps you lazy load (almost) anything. Defer.js is zero-dependency, super-efficient, and Web Vitals friendly.
 
 [![NPM](https://img.shields.io/npm/l/@shinsenter/defer.js)](https://code.shin.company/defer.js/blob/master/LICENSE)
 [![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/@shinsenter/defer.js)](https://snyk.io/advisor/npm-package/@shinsenter/defer.js)
@@ -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**: 3.3.0
+- **Version**: 3.4.0
 - **Author**: Mai Nhut Tan <shin@shin.company>
 - **Copyright**: 2022 AppSeeds <https://code.shin.company/>
 - **License**: [MIT](https://code.shin.company/defer.js/blob/master/LICENSE)
@@ -80,7 +80,7 @@ Just put a `<script>` tag pointing to the library URL just below the opening `<h
   <title>My Awesome Page</title>
 
   <!-- Put defer.min.js here -->
-  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/defer.min.js"></script>
 
   <!-- ... -->
 </head>
@@ -96,7 +96,7 @@ Because `defer.min.js` is optimized to a very tiny file size, you can even inlin
   <title>My Awesome Page</title>
 
   <!-- Copy the script from the below URL -->
-  <!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer.min.js -->
+  <!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/defer.min.js -->
   <script>/* then replace this comment block with the content of defer.min.js */</script>
 
   <!-- ... -->
@@ -114,7 +114,7 @@ just use `defer_plus.min.js` instead of `defer.min.js`.
   <title>My Awesome Page</title>
 
   <!-- Put defer_plus.min.js here -->
-  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer_plus.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/defer_plus.min.js"></script>
 
   <!-- ... -->
 </head>
@@ -131,8 +131,8 @@ right after the `defer.min.js` script tag as the following example:
 <script>/* the content of defer.min.js */</script>
 
 <!-- If legacy browsers like Internet Explorer 9 still need to be supported -->
-<!-- Please put IntersectionObserver polyfill right after defer.js script tag -->
-<script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/polyfill.min.js"><\/script>');</script>
+<!-- Please put IntersectionObserver polyfill right after the Defer.js script tag -->
+<script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/polyfill.min.js"><\/script>');</script>
 ```
 
 *HINT*: Modern browsers support `IntersectionObserver` feature,
diff --git a/docs/apis.md b/docs/apis.md
index 576bd39..a5e14d2 100644
--- a/docs/apis.md
+++ b/docs/apis.md
@@ -1,11 +1,11 @@
 ## Functions
 
-* [Defer(func, [delay], [waitForInteraction])](#Defer) ⇒ <code>void</code>
+* [Defer(func, [delay], [waitForUserAction])](#Defer) ⇒ <code>void</code>
     * [.lazy](#Defer.lazy) : <code>boolean</code>
-    * [.all([selector], [delay], [waitForInteraction])](#Defer.all) ⇒ <code>void</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], [waitForInteraction])](#Defer.css) ⇒ <code>void</code>
-    * [.js(fileUrl, [id], [delay], [onload], [waitForInteraction])](#Defer.js) ⇒ <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>
     * [.reveal(node, [unveiledClass])](#Defer.reveal) ⇒ <code>void</code>
 * ~~[defer(func, [delay])](#defer)~~
 * ~~[deferimg([selector], [delay], [unveiledClass], [resolver], [observeOptions])](#deferimg)~~
@@ -21,7 +21,7 @@
 
 <a name="Defer"></a>
 
-## Defer(func, [delay], [waitForInteraction]) ⇒ <code>void</code>
+## Defer(func, [delay], [waitForUserAction]) ⇒ <code>void</code>
 Heavy DOM manipulations may cause render-blocking issues in real scenarios.
 Wrapping your script with `Defer()` may help your website prevent render-blocking issues.
 
@@ -32,7 +32,7 @@ Wrapping your script with `Defer()` may help your website prevent render-blockin
 | --- | --- | --- | --- |
 | 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. |
-| [waitForInteraction] | <code>boolean</code> | <code>false</code> | This argument tells `Defer()` to delay the execution and wait until there is a user interaction. |
+| [waitForUserAction] | <code>boolean</code> | <code>false</code> | This argument tells `Defer()` to delay the execution and wait until there is a user interaction. |
 
 **Example**  
 jQuery is used in this example to perform some DOM manipulations.
@@ -81,12 +81,12 @@ and wait until the user starts interacting with your page.
 </script>
 ```
 
-* [Defer(func, [delay], [waitForInteraction])](#Defer) ⇒ <code>void</code>
+* [Defer(func, [delay], [waitForUserAction])](#Defer) ⇒ <code>void</code>
     * [.lazy](#Defer.lazy) : <code>boolean</code>
-    * [.all([selector], [delay], [waitForInteraction])](#Defer.all) ⇒ <code>void</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], [waitForInteraction])](#Defer.css) ⇒ <code>void</code>
-    * [.js(fileUrl, [id], [delay], [onload], [waitForInteraction])](#Defer.js) ⇒ <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>
     * [.reveal(node, [unveiledClass])](#Defer.reveal) ⇒ <code>void</code>
 
 
@@ -101,7 +101,7 @@ Setting `Defer.lazy=true` tells the library to delay the execution
 of deferred scripts until the user starts interacting with the page
 regardless of the page load event.
 
-It will override the default behavior of `waitForInteraction`
+It will override the default behavior of `waitForUserAction`
 argument of the `Defer()` method.
 
 Changing this variable will also affect the behavior of these functions:
@@ -125,7 +125,7 @@ To override the default behavior of the `Defer()` method.
 
 <a name="Defer.all"></a>
 
-### Defer.all([selector], [delay], [waitForInteraction]) ⇒ <code>void</code>
+### Defer.all([selector], [delay], [waitForUserAction]) ⇒ <code>void</code>
 Slow scripts (third-party libraries, add-ons, widgets, etc.)
 may cause [Web Vitals](https://web.dev/vitals/) issues in real scenarios.
 
@@ -136,10 +136,10 @@ This trick also works perfectly with `<script>` tags with an `src` attribute.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
 **Note**: (1) To avoid unexpected behavior when using
-the `Defer.all()` function to delay the execution of script tags,
-you should call run `Defer.all()` with a regular script tag.  
+the `Defer.all()` method to delay the execution of script tags,
+you should call run the `Defer.all()` method with a regular script tag.  
 **Note**: (2) Lazy loading behavior changed since v3.0
-when you set `Defer.lazy=true` or `waitForInteraction=true`.
+when you set `Defer.lazy=true` or `waitForUserAction=true`.
 A `<script>` tags with `type="deferjs"` will not execute
 unless the user starts interacting with your page.  
 **Note**: (3) [Resource hints](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) feature was added since v3.2
@@ -151,7 +151,7 @@ This feature is discussed at [#112](https://code.shin.company/defer.js/issues/11
 | --- | --- | --- | --- |
 | [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. |
-| [waitForInteraction] | <code>boolean</code> | <code>false</code> | This argument tells `Defer.all()` to delay the execution of scripts until there is a user interaction. |
+| [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**  
 Using magic `type="deferjs"` attribute:
@@ -169,18 +169,18 @@ After:
 <script type="deferjs">
   // your JavaScript will still be here,
   // but it will not run unless the user starts interacting with your page.
-  console.log('This script is lazy loaded with type="deferjs" attribute.');
+  console.info('This script is lazy loaded with type="deferjs" attribute.');
 </script>
 ```
 **Example**  
 Using your value for the type attribute, such as `type="my-magic"`:
 
 If you hate using the `type="deferjs"` attribute,
-you can even choose yours by using the `Defer.all()` function.
+you can even choose yours by using the `Defer.all()` method.
 
 Notice: To avoid unexpected behavior when using
-the `Defer.all()` function to delay the execution of script tags,
-you should call run `Defer.all()` with a regular script tag.
+the `Defer.all()` method to delay the execution of script tags,
+you should call run the `Defer.all()` method with a regular script tag.
 
 ```html
 <script type="my-magic">
@@ -199,18 +199,18 @@ you should call run `Defer.all()` with a regular script tag.
 </script>
 ```
 **Example**  
-Using `Defer.all()` with script tags with `src` attribute:
+Using the `Defer.all()` method for script tags with `src` attribute:
 
 Your scripts will work perfectly when you mix inline scripts
 and script tags with an src attribute, like the below example.
 
-The `waitForInteraction` argument (the fifth argument) is set to `true`,
+The `waitForUserAction` argument (the fifth argument) is set to `true`,
 the library will defer the load of the tippy.js library until the user starts
 interacting, when the user moves his/her mouse on the button, a tooltip will show.
 
 Notice: To avoid unexpected behavior when using
-the `Defer.all()` function to delay the execution of script tags,
-you should call run `Defer.all()` with a regular script tag.
+the `Defer.all()` method to delay the execution of script tags,
+you should call run the `Defer.all()` method with a regular script tag.
 
 
 ```html
@@ -240,7 +240,7 @@ The `Defer.dom()` method is useful in the below use cases:
 - Scroll-reveal features, such as handling AJAX updating when a block is entering the viewport.
 - An element that was deferred by Defer.dom() will be unveiled as soon as the page finished loading.
 
-An element that was deferred by `Defer.dom()` will be unveiled
+An element that was deferred by the `Defer.dom()` method will be unveiled
 when it going to enters the browser viewport.
 
 The `Defer.dom()` method also converts `data-*` attributes of the elements
@@ -279,7 +279,6 @@ a very small placeholder image before the real image gets downloaded.
 ```html
 <div id="demo-basic">
   <img alt="A lazy image" width="200" height="300" loading="lazy"
-       src=""
        data-src="https://picsum.photos/id/1003/200/300">
 
   <img alt="A lazy image with a low-resolution placeholder"
@@ -356,7 +355,7 @@ and their children's HTML nodes.
 **Example**  
 Basic usage with adding CSS class.
 
-`Defer.dom()` also allows you to add CSS class names when an element is unveiled.
+The `Defer.dom()` method also allows you to add CSS class names when an element is unveiled.
 In this example, we will add some CSS class names to make an `<img>` tag animate.
 
 ```html
@@ -438,7 +437,7 @@ but we can also use CSS class names instead of inline `style` attributes.
 **Example**  
 Lazy load a video.
 
-With `Defer.dom()`, we can easily defer the load of various media tags, such as a `<video>` tag.
+With the `Defer.dom()` method, we can easily defer the load of various media tags, such as a `<video>` tag.
 
 ```html
 <div id="demo-video">
@@ -458,7 +457,7 @@ With `Defer.dom()`, we can easily defer the load of various media tags, such as
 **Example**  
 Lazy load an iframe.
 
-With `Defer.dom()`, we can effortlessly defer the load of iframe tags.
+With the `Defer.dom()` method, we can effortlessly defer the load of iframe tags.
 
 ```html
 <div id="demo-iframe">
@@ -470,13 +469,13 @@ With `Defer.dom()`, we can effortlessly defer the load of iframe tags.
 </div>
 
 <script>
-  Defer.dom('#demo-iframe iframe', 0, 'animate__animated animate__fadeIn');
+  Defer.dom('#demo-iframe iframe', 0, 'iframe-loaded');
 </script>
 ```
 **Example**  
 Lazy load a Youtube video.
 
-This example uses `Defer.dom()` to defer a load of a Youtube iframe.
+This example uses the `Defer.dom()` method to defer a load of a Youtube iframe.
 
 ```html
 <div id="demo-youtube">
@@ -490,13 +489,13 @@ This example uses `Defer.dom()` to defer a load of a Youtube iframe.
 </div>
 
 <script>
-  Defer.dom('#demo-youtube iframe', 0, 'animate__animated animate__fadeIn');
+  Defer.dom('#demo-youtube iframe', 0, 'youtube-loaded');
 </script>
 ```
 **Example**  
 Lazy load a Facebook post.
 
-This example uses `Defer.dom()` to defer a load of a Facebook post.
+This example uses the `Defer.dom()` method to defer a load of a Facebook post.
 
 ```html
 <div id="demo-facebook">
@@ -509,13 +508,13 @@ This example uses `Defer.dom()` to defer a load of a Facebook post.
 </div>
 
 <script>
-  Defer.dom('#demo-facebook iframe', 0, 'animate__animated animate__fadeIn');
+  Defer.dom('#demo-facebook iframe', 0, 'facebook-loaded');
 </script>
 ```
 **Example**  
 Lazy load a Discord chat box.
 
-This example uses `Defer.dom()` to defer a load of a Discord chat box.
+This example uses the `Defer.dom()` method to defer a load of a Discord chat box.
 
 ```html
 <iframe id="discord-widget" title="Discord"
@@ -532,7 +531,7 @@ This example uses `Defer.dom()` to defer a load of a Discord chat box.
 **Example**  
 Scroll and reveal.
 
-`Defer.dom()` also helps you do an action when an element is unveiled.
+The `Defer.dom()` method also helps you do an action when an element is unveiled.
 
 In this example, when the user scrolls to the bottom of the page,
 he/she will see a message as soon as an element with `id="surprise-me"` appears.
@@ -540,7 +539,7 @@ he/she will see a message as soon as an element with `id="surprise-me"` appears.
 ```html
 <script>
   Defer.dom('#surprise-me', 1000, 'seen', function(node) {
-    alert('Yay!\n\nYou have seen all examples.\nHave fun coding with @shinsenter/defer.js!');
+    alert('Yay!\n\nYou have seen all examples.\nHave fun with Defer.js!');
   });
 </script>
 ```
@@ -549,13 +548,13 @@ 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], [waitForInteraction]) ⇒ <code>void</code>
+### Defer.css(fileUrl, [id], [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.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
 **Note**: Lazy loading behavior changed since v3.0
-when you set `Defer.lazy=true` or `waitForInteraction=true`.
+when you set `Defer.lazy=true` or `waitForUserAction=true`.
 The `fileUrl` will not be fetched unless the user starts interacting with your page.  
 **Since**: 2.0  
 
@@ -565,10 +564,10 @@ The `fileUrl` will not be fetched unless the user starts interacting with your p
 | [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. |
-| [waitForInteraction] | <code>boolean</code> | <code>false</code> | This argument tells `Defer.css()` to delay downloading the CSS file until there is a user interaction. |
+| [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**  
-Using `Defer.css()` to lazy load
+Using the `Defer.css()` method to lazy load
 [FontAwesome](https://fontawesome.com/docs/web/setup/get-started) (CSS and some font files).
 
 ```html
@@ -588,7 +587,7 @@ Using `Defer.css()` to lazy load
   var fileUrl = 'https://pro.fontawesome.com/releases/v5.14.0/css/all.css';
 
   Defer.css(fileUrl, 'fa5-css', 0, function() {
-    console.info('Debug', 'FontAwesome is loaded.'); // debug
+    console.info('FontAwesome is loaded.'); // debug
   });
 </script>
 ```
@@ -599,7 +598,7 @@ Lazy load animate.css library.
 In this example, we want the download of the
 [Animate.css library](https://animate.style/#documentation)
 to wait for the first user interaction with your page
-so the `waitForInteraction` argument (the fifth argument) is set to `true`.
+so the `waitForUserAction` argument (the fifth argument) is set to `true`.
 
 When the Animate.css library was downloaded,
 we will add CSS classes from Animate.css to every tag with `class=".demo"` on the page.
@@ -612,7 +611,7 @@ No tag will be animated unless the user scrolls to its position.
 
   // This script will lazy load animate.css library.
   Defer.css(origin + '/animate.min.css', 'animate-css', 0, function () {
-    console.info('Debug', 'Animate.css is loaded.'); // debug
+    console.info('Animate.css is loaded.'); // debug
 
     // adds animation classes to demo blocks.
     Defer.dom('.demo', 100, 'animate__animated animate__fadeIn');
@@ -624,17 +623,17 @@ No tag will be animated unless the user scrolls to its position.
 
 <a name="Defer.js"></a>
 
-### Defer.js(fileUrl, [id], [delay], [onload], [waitForInteraction]) ⇒ <code>void</code>
-We use `Defer.js()` to defer a load of 3rd-party
+### Defer.js(fileUrl, [id], [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.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
-**Note**: (1) Because the download of a file using `Defer.js()` function is asynchronous,
-to avoid dependency error when lazy loading a third-party library using `Defer.js()`,
+**Note**: (1) Because the download of a file using the `Defer.js()` method is asynchronous,
+to avoid dependency error when lazy loading a third-party library using the `Defer.js()` method,
 it is highly recommended that the `onload` callback function be used
 to make sure that the library you needed is completely defined.  
 **Note**: (2) Lazy loading behavior changed since v3.0
-when you set `Defer.lazy=true` or `waitForInteraction=true`.
+when you set `Defer.lazy=true` or `waitForUserAction=true`.
 The `fileUrl` will not be fetched unless the user starts interacting with your page.  
 **Since**: 2.0  
 
@@ -644,15 +643,15 @@ The `fileUrl` will not be fetched unless the user starts interacting with your p
 | [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. |
-| [waitForInteraction] | <code>boolean</code> | <code>false</code> | This argument tells `Defer.js()` to delay downloading the JS file until there is a user interaction. |
+| [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**  
 An alternative way to lazy load Google Tag Manager script.
 
-Using `Defer.js()` to lazy load Google Tag Manager library and its external scripts.
+Using the `Defer.js()` method to lazy load Google Tag Manager library and its external scripts.
 
 In this example, we want the GTM to execute as soon as the page is loaded
-so the `waitForInteraction` argument (the fifth argument) is set to `false`.
+so the `waitForUserAction` argument (the fifth argument) is set to `false`.
 
 ```html
 <script>
@@ -662,18 +661,18 @@ so the `waitForInteraction` argument (the fifth argument) is set to `false`.
   dataLayer.push(['config', GTM_ID]);
 
   Defer.js('https://www.googletagmanager.com/gtag/js?id=' + GTM_ID, 'google-tag', 0, function() {
-    console.info('Debug', 'Google Tag Manager is loaded.'); // debug
+    console.info('Google Tag Manager is loaded.'); // debug
   }, false);
 </script>
 ```
 **Example**  
 Lazy load AddThis add-on.
 
-Using `Defer.js()` to lazy load
+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 `waitForInteraction` argument (the fifth argument) is set to `true`).
+(the `waitForUserAction` argument (the fifth argument) is set to `true`).
 
 ```html
 <div class="demo-addthis"></div>
@@ -683,7 +682,7 @@ AddThis add-on will not be loaded until the user starts interacting with the pag
   var loaded  = false;
 
   Defer.js(fileUrl, 'addthis-js', 0, function() {
-    console.info('Debug', 'AddThis add-on is loaded.'); // debug
+    console.info('AddThis add-on is loaded.'); // debug
   }, true);
 </script>
 ```
@@ -708,13 +707,13 @@ only when the user scrolls to any `code` block position.
 
   // this script will lazy load Prism.js library and its dark theme.
   // when loading is done, it will apply code formatting to every <code> tag.
-  var origin = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0';
+  var origin = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0';
   Defer.css(origin + '/themes/prism-tomorrow.min.css', 'prism-css');
   Defer.js(origin + '/prism.min.js', 'prism-js', 0, function () {
-    console.info('Debug', 'Prism.js is loaded.'); // debug
-
     // enables code highlighting for code tags using Defer.dom()
     Defer.dom('pre code', 100, 'ide-loaded', Prism.highlightElement, {rootMargin: "120%"});
+
+    console.info('Prism.js is loaded.'); // debug
   });
 </script>
 ```
@@ -763,7 +762,7 @@ document.querySelectorAll('.multi-lazy')
 ## ~~defer(func, [delay])~~
 ***Deprecated***
 
-Deprecated since version 2.0
+Deprecated from version 2.0
 
 **Kind**: global function  
 **See**: [Defer](#Defer)  
@@ -782,7 +781,7 @@ Deprecated since version 2.0
 ## ~~deferimg([selector], [delay], [unveiledClass], [resolver], [observeOptions])~~
 ***Deprecated***
 
-Deprecated since version 2.0
+Deprecated from version 2.0
 
 **Kind**: global function  
 **See**: [dom](#Defer.dom)  
@@ -804,7 +803,7 @@ Deprecated since version 2.0
 ## ~~deferiframe([selector], [delay], [unveiledClass], [resolver], [observeOptions])~~
 ***Deprecated***
 
-Deprecated since version 2.0
+Deprecated from version 2.0
 
 **Kind**: global function  
 **See**: [dom](#Defer.dom)  
@@ -826,7 +825,7 @@ Deprecated since version 2.0
 ## ~~deferstyle(src, [id], [delay], [onload])~~
 ***Deprecated***
 
-Deprecated since version 2.0
+Deprecated from version 2.0
 
 **Kind**: global function  
 **See**: [css](#Defer.css)  
@@ -847,7 +846,7 @@ Deprecated since version 2.0
 ## ~~deferscript(src, [id], [delay], [onload])~~
 ***Deprecated***
 
-Deprecated since version 2.0
+Deprecated from version 2.0
 
 **Kind**: global function  
 **See**: [js](#Defer.js)  
diff --git a/docs/index.md b/docs/index.md
index c6a455b..464e2d6 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,6 +1,6 @@
 # Package @shinsenter/defer.js
 
-🥇 A JavaScript micro-library that helps you lazy load (almost) anything. It's zero-dependency, super-efficient, and Web Vitals friendly.
+🥇 A JavaScript micro-library that helps you lazy load (almost) anything. Defer.js is zero-dependency, super-efficient, and Web Vitals friendly.
 
 [![NPM](https://img.shields.io/npm/l/@shinsenter/defer.js)](https://code.shin.company/defer.js/blob/master/LICENSE)
 [![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/@shinsenter/defer.js)](https://snyk.io/advisor/npm-package/@shinsenter/defer.js)
@@ -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**: 3.3.0
+- **Version**: 3.4.0
 - **Author**: Mai Nhut Tan <shin@shin.company>
 - **Copyright**: 2022 AppSeeds <https://code.shin.company/>
 - **License**: [MIT](https://code.shin.company/defer.js/blob/master/LICENSE)
@@ -80,7 +80,7 @@ Just put a `<script>` tag pointing to the library URL just below the opening `<h
   <title>My Awesome Page</title>
 
   <!-- Put defer.min.js here -->
-  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/defer.min.js"></script>
 
   <!-- ... -->
 </head>
@@ -96,7 +96,7 @@ Because `defer.min.js` is optimized to a very tiny file size, you can even inlin
   <title>My Awesome Page</title>
 
   <!-- Copy the script from the below URL -->
-  <!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer.min.js -->
+  <!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/defer.min.js -->
   <script>/* then replace this comment block with the content of defer.min.js */</script>
 
   <!-- ... -->
@@ -114,7 +114,7 @@ just use `defer_plus.min.js` instead of `defer.min.js`.
   <title>My Awesome Page</title>
 
   <!-- Put defer_plus.min.js here -->
-  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer_plus.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/defer_plus.min.js"></script>
 
   <!-- ... -->
 </head>
@@ -131,20 +131,20 @@ right after the `defer.min.js` script tag as the following example:
 <script>/* the content of defer.min.js */</script>
 
 <!-- If legacy browsers like Internet Explorer 9 still need to be supported -->
-<!-- Please put IntersectionObserver polyfill right after defer.js script tag -->
-<script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/polyfill.min.js"><\/script>');</script>
+<!-- Please put IntersectionObserver polyfill right after the Defer.js script tag -->
+<script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/polyfill.min.js"><\/script>');</script>
 ```
 
 *HINT*: Modern browsers support `IntersectionObserver` feature,
 so you don't have to be concerned about it if you don't care about IE users.
 ## Functions
 
-* [Defer(func, [delay], [waitForInteraction])](#Defer) ⇒ <code>void</code>
+* [Defer(func, [delay], [waitForUserAction])](#Defer) ⇒ <code>void</code>
     * [.lazy](#Defer.lazy) : <code>boolean</code>
-    * [.all([selector], [delay], [waitForInteraction])](#Defer.all) ⇒ <code>void</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], [waitForInteraction])](#Defer.css) ⇒ <code>void</code>
-    * [.js(fileUrl, [id], [delay], [onload], [waitForInteraction])](#Defer.js) ⇒ <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>
     * [.reveal(node, [unveiledClass])](#Defer.reveal) ⇒ <code>void</code>
 * ~~[defer(func, [delay])](#defer)~~
 * ~~[deferimg([selector], [delay], [unveiledClass], [resolver], [observeOptions])](#deferimg)~~
@@ -160,7 +160,7 @@ so you don't have to be concerned about it if you don't care about IE users.
 
 <a name="Defer"></a>
 
-## Defer(func, [delay], [waitForInteraction]) ⇒ <code>void</code>
+## Defer(func, [delay], [waitForUserAction]) ⇒ <code>void</code>
 Heavy DOM manipulations may cause render-blocking issues in real scenarios.
 Wrapping your script with `Defer()` may help your website prevent render-blocking issues.
 
@@ -171,7 +171,7 @@ Wrapping your script with `Defer()` may help your website prevent render-blockin
 | --- | --- | --- | --- |
 | 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. |
-| [waitForInteraction] | <code>boolean</code> | <code>false</code> | This argument tells `Defer()` to delay the execution and wait until there is a user interaction. |
+| [waitForUserAction] | <code>boolean</code> | <code>false</code> | This argument tells `Defer()` to delay the execution and wait until there is a user interaction. |
 
 **Example**  
 jQuery is used in this example to perform some DOM manipulations.
@@ -220,12 +220,12 @@ and wait until the user starts interacting with your page.
 </script>
 ```
 
-* [Defer(func, [delay], [waitForInteraction])](#Defer) ⇒ <code>void</code>
+* [Defer(func, [delay], [waitForUserAction])](#Defer) ⇒ <code>void</code>
     * [.lazy](#Defer.lazy) : <code>boolean</code>
-    * [.all([selector], [delay], [waitForInteraction])](#Defer.all) ⇒ <code>void</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], [waitForInteraction])](#Defer.css) ⇒ <code>void</code>
-    * [.js(fileUrl, [id], [delay], [onload], [waitForInteraction])](#Defer.js) ⇒ <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>
     * [.reveal(node, [unveiledClass])](#Defer.reveal) ⇒ <code>void</code>
 
 
@@ -240,7 +240,7 @@ Setting `Defer.lazy=true` tells the library to delay the execution
 of deferred scripts until the user starts interacting with the page
 regardless of the page load event.
 
-It will override the default behavior of `waitForInteraction`
+It will override the default behavior of `waitForUserAction`
 argument of the `Defer()` method.
 
 Changing this variable will also affect the behavior of these functions:
@@ -264,7 +264,7 @@ To override the default behavior of the `Defer()` method.
 
 <a name="Defer.all"></a>
 
-### Defer.all([selector], [delay], [waitForInteraction]) ⇒ <code>void</code>
+### Defer.all([selector], [delay], [waitForUserAction]) ⇒ <code>void</code>
 Slow scripts (third-party libraries, add-ons, widgets, etc.)
 may cause [Web Vitals](https://web.dev/vitals/) issues in real scenarios.
 
@@ -275,10 +275,10 @@ This trick also works perfectly with `<script>` tags with an `src` attribute.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
 **Note**: (1) To avoid unexpected behavior when using
-the `Defer.all()` function to delay the execution of script tags,
-you should call run `Defer.all()` with a regular script tag.  
+the `Defer.all()` method to delay the execution of script tags,
+you should call run the `Defer.all()` method with a regular script tag.  
 **Note**: (2) Lazy loading behavior changed since v3.0
-when you set `Defer.lazy=true` or `waitForInteraction=true`.
+when you set `Defer.lazy=true` or `waitForUserAction=true`.
 A `<script>` tags with `type="deferjs"` will not execute
 unless the user starts interacting with your page.  
 **Note**: (3) [Resource hints](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) feature was added since v3.2
@@ -290,7 +290,7 @@ This feature is discussed at [#112](https://code.shin.company/defer.js/issues/11
 | --- | --- | --- | --- |
 | [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. |
-| [waitForInteraction] | <code>boolean</code> | <code>false</code> | This argument tells `Defer.all()` to delay the execution of scripts until there is a user interaction. |
+| [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**  
 Using magic `type="deferjs"` attribute:
@@ -308,18 +308,18 @@ After:
 <script type="deferjs">
   // your JavaScript will still be here,
   // but it will not run unless the user starts interacting with your page.
-  console.log('This script is lazy loaded with type="deferjs" attribute.');
+  console.info('This script is lazy loaded with type="deferjs" attribute.');
 </script>
 ```
 **Example**  
 Using your value for the type attribute, such as `type="my-magic"`:
 
 If you hate using the `type="deferjs"` attribute,
-you can even choose yours by using the `Defer.all()` function.
+you can even choose yours by using the `Defer.all()` method.
 
 Notice: To avoid unexpected behavior when using
-the `Defer.all()` function to delay the execution of script tags,
-you should call run `Defer.all()` with a regular script tag.
+the `Defer.all()` method to delay the execution of script tags,
+you should call run the `Defer.all()` method with a regular script tag.
 
 ```html
 <script type="my-magic">
@@ -338,18 +338,18 @@ you should call run `Defer.all()` with a regular script tag.
 </script>
 ```
 **Example**  
-Using `Defer.all()` with script tags with `src` attribute:
+Using the `Defer.all()` method for script tags with `src` attribute:
 
 Your scripts will work perfectly when you mix inline scripts
 and script tags with an src attribute, like the below example.
 
-The `waitForInteraction` argument (the fifth argument) is set to `true`,
+The `waitForUserAction` argument (the fifth argument) is set to `true`,
 the library will defer the load of the tippy.js library until the user starts
 interacting, when the user moves his/her mouse on the button, a tooltip will show.
 
 Notice: To avoid unexpected behavior when using
-the `Defer.all()` function to delay the execution of script tags,
-you should call run `Defer.all()` with a regular script tag.
+the `Defer.all()` method to delay the execution of script tags,
+you should call run the `Defer.all()` method with a regular script tag.
 
 
 ```html
@@ -379,7 +379,7 @@ The `Defer.dom()` method is useful in the below use cases:
 - Scroll-reveal features, such as handling AJAX updating when a block is entering the viewport.
 - An element that was deferred by Defer.dom() will be unveiled as soon as the page finished loading.
 
-An element that was deferred by `Defer.dom()` will be unveiled
+An element that was deferred by the `Defer.dom()` method will be unveiled
 when it going to enters the browser viewport.
 
 The `Defer.dom()` method also converts `data-*` attributes of the elements
@@ -418,7 +418,6 @@ a very small placeholder image before the real image gets downloaded.
 ```html
 <div id="demo-basic">
   <img alt="A lazy image" width="200" height="300" loading="lazy"
-       src=""
        data-src="https://picsum.photos/id/1003/200/300">
 
   <img alt="A lazy image with a low-resolution placeholder"
@@ -495,7 +494,7 @@ and their children's HTML nodes.
 **Example**  
 Basic usage with adding CSS class.
 
-`Defer.dom()` also allows you to add CSS class names when an element is unveiled.
+The `Defer.dom()` method also allows you to add CSS class names when an element is unveiled.
 In this example, we will add some CSS class names to make an `<img>` tag animate.
 
 ```html
@@ -577,7 +576,7 @@ but we can also use CSS class names instead of inline `style` attributes.
 **Example**  
 Lazy load a video.
 
-With `Defer.dom()`, we can easily defer the load of various media tags, such as a `<video>` tag.
+With the `Defer.dom()` method, we can easily defer the load of various media tags, such as a `<video>` tag.
 
 ```html
 <div id="demo-video">
@@ -597,7 +596,7 @@ With `Defer.dom()`, we can easily defer the load of various media tags, such as
 **Example**  
 Lazy load an iframe.
 
-With `Defer.dom()`, we can effortlessly defer the load of iframe tags.
+With the `Defer.dom()` method, we can effortlessly defer the load of iframe tags.
 
 ```html
 <div id="demo-iframe">
@@ -609,13 +608,13 @@ With `Defer.dom()`, we can effortlessly defer the load of iframe tags.
 </div>
 
 <script>
-  Defer.dom('#demo-iframe iframe', 0, 'animate__animated animate__fadeIn');
+  Defer.dom('#demo-iframe iframe', 0, 'iframe-loaded');
 </script>
 ```
 **Example**  
 Lazy load a Youtube video.
 
-This example uses `Defer.dom()` to defer a load of a Youtube iframe.
+This example uses the `Defer.dom()` method to defer a load of a Youtube iframe.
 
 ```html
 <div id="demo-youtube">
@@ -629,13 +628,13 @@ This example uses `Defer.dom()` to defer a load of a Youtube iframe.
 </div>
 
 <script>
-  Defer.dom('#demo-youtube iframe', 0, 'animate__animated animate__fadeIn');
+  Defer.dom('#demo-youtube iframe', 0, 'youtube-loaded');
 </script>
 ```
 **Example**  
 Lazy load a Facebook post.
 
-This example uses `Defer.dom()` to defer a load of a Facebook post.
+This example uses the `Defer.dom()` method to defer a load of a Facebook post.
 
 ```html
 <div id="demo-facebook">
@@ -648,13 +647,13 @@ This example uses `Defer.dom()` to defer a load of a Facebook post.
 </div>
 
 <script>
-  Defer.dom('#demo-facebook iframe', 0, 'animate__animated animate__fadeIn');
+  Defer.dom('#demo-facebook iframe', 0, 'facebook-loaded');
 </script>
 ```
 **Example**  
 Lazy load a Discord chat box.
 
-This example uses `Defer.dom()` to defer a load of a Discord chat box.
+This example uses the `Defer.dom()` method to defer a load of a Discord chat box.
 
 ```html
 <iframe id="discord-widget" title="Discord"
@@ -671,7 +670,7 @@ This example uses `Defer.dom()` to defer a load of a Discord chat box.
 **Example**  
 Scroll and reveal.
 
-`Defer.dom()` also helps you do an action when an element is unveiled.
+The `Defer.dom()` method also helps you do an action when an element is unveiled.
 
 In this example, when the user scrolls to the bottom of the page,
 he/she will see a message as soon as an element with `id="surprise-me"` appears.
@@ -679,7 +678,7 @@ he/she will see a message as soon as an element with `id="surprise-me"` appears.
 ```html
 <script>
   Defer.dom('#surprise-me', 1000, 'seen', function(node) {
-    alert('Yay!\n\nYou have seen all examples.\nHave fun coding with @shinsenter/defer.js!');
+    alert('Yay!\n\nYou have seen all examples.\nHave fun with Defer.js!');
   });
 </script>
 ```
@@ -688,13 +687,13 @@ 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], [waitForInteraction]) ⇒ <code>void</code>
+### Defer.css(fileUrl, [id], [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.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
 **Note**: Lazy loading behavior changed since v3.0
-when you set `Defer.lazy=true` or `waitForInteraction=true`.
+when you set `Defer.lazy=true` or `waitForUserAction=true`.
 The `fileUrl` will not be fetched unless the user starts interacting with your page.  
 **Since**: 2.0  
 
@@ -704,10 +703,10 @@ The `fileUrl` will not be fetched unless the user starts interacting with your p
 | [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. |
-| [waitForInteraction] | <code>boolean</code> | <code>false</code> | This argument tells `Defer.css()` to delay downloading the CSS file until there is a user interaction. |
+| [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**  
-Using `Defer.css()` to lazy load
+Using the `Defer.css()` method to lazy load
 [FontAwesome](https://fontawesome.com/docs/web/setup/get-started) (CSS and some font files).
 
 ```html
@@ -727,7 +726,7 @@ Using `Defer.css()` to lazy load
   var fileUrl = 'https://pro.fontawesome.com/releases/v5.14.0/css/all.css';
 
   Defer.css(fileUrl, 'fa5-css', 0, function() {
-    console.info('Debug', 'FontAwesome is loaded.'); // debug
+    console.info('FontAwesome is loaded.'); // debug
   });
 </script>
 ```
@@ -738,7 +737,7 @@ Lazy load animate.css library.
 In this example, we want the download of the
 [Animate.css library](https://animate.style/#documentation)
 to wait for the first user interaction with your page
-so the `waitForInteraction` argument (the fifth argument) is set to `true`.
+so the `waitForUserAction` argument (the fifth argument) is set to `true`.
 
 When the Animate.css library was downloaded,
 we will add CSS classes from Animate.css to every tag with `class=".demo"` on the page.
@@ -751,7 +750,7 @@ No tag will be animated unless the user scrolls to its position.
 
   // This script will lazy load animate.css library.
   Defer.css(origin + '/animate.min.css', 'animate-css', 0, function () {
-    console.info('Debug', 'Animate.css is loaded.'); // debug
+    console.info('Animate.css is loaded.'); // debug
 
     // adds animation classes to demo blocks.
     Defer.dom('.demo', 100, 'animate__animated animate__fadeIn');
@@ -763,17 +762,17 @@ No tag will be animated unless the user scrolls to its position.
 
 <a name="Defer.js"></a>
 
-### Defer.js(fileUrl, [id], [delay], [onload], [waitForInteraction]) ⇒ <code>void</code>
-We use `Defer.js()` to defer a load of 3rd-party
+### Defer.js(fileUrl, [id], [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.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
-**Note**: (1) Because the download of a file using `Defer.js()` function is asynchronous,
-to avoid dependency error when lazy loading a third-party library using `Defer.js()`,
+**Note**: (1) Because the download of a file using the `Defer.js()` method is asynchronous,
+to avoid dependency error when lazy loading a third-party library using the `Defer.js()` method,
 it is highly recommended that the `onload` callback function be used
 to make sure that the library you needed is completely defined.  
 **Note**: (2) Lazy loading behavior changed since v3.0
-when you set `Defer.lazy=true` or `waitForInteraction=true`.
+when you set `Defer.lazy=true` or `waitForUserAction=true`.
 The `fileUrl` will not be fetched unless the user starts interacting with your page.  
 **Since**: 2.0  
 
@@ -783,15 +782,15 @@ The `fileUrl` will not be fetched unless the user starts interacting with your p
 | [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. |
-| [waitForInteraction] | <code>boolean</code> | <code>false</code> | This argument tells `Defer.js()` to delay downloading the JS file until there is a user interaction. |
+| [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**  
 An alternative way to lazy load Google Tag Manager script.
 
-Using `Defer.js()` to lazy load Google Tag Manager library and its external scripts.
+Using the `Defer.js()` method to lazy load Google Tag Manager library and its external scripts.
 
 In this example, we want the GTM to execute as soon as the page is loaded
-so the `waitForInteraction` argument (the fifth argument) is set to `false`.
+so the `waitForUserAction` argument (the fifth argument) is set to `false`.
 
 ```html
 <script>
@@ -801,18 +800,18 @@ so the `waitForInteraction` argument (the fifth argument) is set to `false`.
   dataLayer.push(['config', GTM_ID]);
 
   Defer.js('https://www.googletagmanager.com/gtag/js?id=' + GTM_ID, 'google-tag', 0, function() {
-    console.info('Debug', 'Google Tag Manager is loaded.'); // debug
+    console.info('Google Tag Manager is loaded.'); // debug
   }, false);
 </script>
 ```
 **Example**  
 Lazy load AddThis add-on.
 
-Using `Defer.js()` to lazy load
+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 `waitForInteraction` argument (the fifth argument) is set to `true`).
+(the `waitForUserAction` argument (the fifth argument) is set to `true`).
 
 ```html
 <div class="demo-addthis"></div>
@@ -822,7 +821,7 @@ AddThis add-on will not be loaded until the user starts interacting with the pag
   var loaded  = false;
 
   Defer.js(fileUrl, 'addthis-js', 0, function() {
-    console.info('Debug', 'AddThis add-on is loaded.'); // debug
+    console.info('AddThis add-on is loaded.'); // debug
   }, true);
 </script>
 ```
@@ -847,13 +846,13 @@ only when the user scrolls to any `code` block position.
 
   // this script will lazy load Prism.js library and its dark theme.
   // when loading is done, it will apply code formatting to every <code> tag.
-  var origin = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0';
+  var origin = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0';
   Defer.css(origin + '/themes/prism-tomorrow.min.css', 'prism-css');
   Defer.js(origin + '/prism.min.js', 'prism-js', 0, function () {
-    console.info('Debug', 'Prism.js is loaded.'); // debug
-
     // enables code highlighting for code tags using Defer.dom()
     Defer.dom('pre code', 100, 'ide-loaded', Prism.highlightElement, {rootMargin: "120%"});
+
+    console.info('Prism.js is loaded.'); // debug
   });
 </script>
 ```
@@ -902,7 +901,7 @@ document.querySelectorAll('.multi-lazy')
 ## ~~defer(func, [delay])~~
 ***Deprecated***
 
-Deprecated since version 2.0
+Deprecated from version 2.0
 
 **Kind**: global function  
 **See**: [Defer](#Defer)  
@@ -921,7 +920,7 @@ Deprecated since version 2.0
 ## ~~deferimg([selector], [delay], [unveiledClass], [resolver], [observeOptions])~~
 ***Deprecated***
 
-Deprecated since version 2.0
+Deprecated from version 2.0
 
 **Kind**: global function  
 **See**: [dom](#Defer.dom)  
@@ -943,7 +942,7 @@ Deprecated since version 2.0
 ## ~~deferiframe([selector], [delay], [unveiledClass], [resolver], [observeOptions])~~
 ***Deprecated***
 
-Deprecated since version 2.0
+Deprecated from version 2.0
 
 **Kind**: global function  
 **See**: [dom](#Defer.dom)  
@@ -965,7 +964,7 @@ Deprecated since version 2.0
 ## ~~deferstyle(src, [id], [delay], [onload])~~
 ***Deprecated***
 
-Deprecated since version 2.0
+Deprecated from version 2.0
 
 **Kind**: global function  
 **See**: [css](#Defer.css)  
@@ -986,7 +985,7 @@ Deprecated since version 2.0
 ## ~~deferscript(src, [id], [delay], [onload])~~
 ***Deprecated***
 
-Deprecated since version 2.0
+Deprecated from version 2.0
 
 **Kind**: global function  
 **See**: [js](#Defer.js)  
diff --git a/package-lock.json b/package-lock.json
index 13af5cb..4ce0563 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@shinsenter/defer.js",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@shinsenter/defer.js",
-      "version": "3.3.0",
+      "version": "3.4.0",
       "funding": [
         {
           "type": "github",
diff --git a/package.json b/package.json
index d87820a..af236f0 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "@shinsenter/defer.js",
-  "title": "defer.js",
-  "version": "3.3.0",
-  "description": "🥇 A JavaScript micro-library that helps you lazy load (almost) anything. It's zero-dependency, super-efficient, and Web Vitals friendly.",
+  "title": "Defer.js",
+  "version": "3.4.0",
+  "description": "🥇 A JavaScript micro-library that helps you lazy load (almost) anything. Defer.js is zero-dependency, super-efficient, and Web Vitals friendly.",
   "homepage": "https://shinsenter.github.io/defer.js/",
   "license": "MIT",
   "author": {
diff --git a/src/defer.js b/src/defer.js
index c3580a9..6ca5b53 100644
--- a/src/defer.js
+++ b/src/defer.js
@@ -30,22 +30,20 @@
  */
 
 /**
- * 🥇 A super small, super efficient library
- * that helps you lazy load (almost) anything.
- * Core Web Vitals friendly.
+ * 🥇 A JavaScript micro-library that helps you lazy load (almost) anything.
+ * Defer.js is zero-dependency, super-efficient, and Web Vitals friendly.
  *
  * @author    Mai Nhut Tan <shin@shin.company>
  * @copyright 2022 AppSeeds <https://code.shin.company/>
- * @version   3.3.0
+ * @version   3.4.0
  * @license   {@link https://code.shin.company/defer.js/blob/master/LICENSE|MIT}
  */
 
-/*!@shinsenter/defer.js@3.3.0*/
+/*!@shinsenter/defer.js@3.4.0*/
 (function (window) {
 
-  var namespace  = 'Defer';
-  var version    = '3.3.0';
-  var _debugName = namespace + ' v' + version;
+  var namespace = 'Defer';
+  var version   = '3.4.0';
 
   /*
   |--------------------------------------------------------------------------
@@ -53,46 +51,55 @@
   |--------------------------------------------------------------------------
   */
 
-  // window event handler
-  var _eventHandler;
+  // aliases for reusable variables
+  var _boolFalse    = false;
+  var _txtLink      = 'link';
+  var _txtScript    = 'script';
 
-  // browser features
-  var document = window.document || window;
-  var engine   = window.setTimeout;
+  // aliases for events
+  var _txtLoad      = 'load';
+  var _txtPageshow  = 'pageshow';
 
-  // the IntersectionObserver feature
-  var IntersectionObserver = window.IntersectionObserver;
+  // aliases for object methods
+  var _txtForEach   = 'forEach';
+  var _txtGetAttr   = 'getAttribute';
+  var _txtSetAttr   = 'setAttribute';
+  var _txtShift     = 'shift';
 
-  // variables that hold the state of Defer
-  var _booted       = (/p/).test(document.readyState);
-  var _queueDefer   = [];
-  var _queueDelay   = [];
-  var _slice        = _queueDefer.slice;
+  // aliases for object attributes
+  var _txtXorigin   = 'crossorigin';
+  var _txtIntegrity = 'integrity';
 
   // page events
-  var _load         = 'load';
-  var _pageshow     = 'pageshow';
   var _userEvents   = ['mousemove', 'keydown', 'touchstart', 'wheel'];
-  var _windowEvent  = 'on' + _pageshow in window ? _pageshow : _load;
+  var _windowEvent  = 'on' + _txtPageshow in window ? _txtPageshow : _txtLoad;
 
-  // aliases for object attributes
-  var _attrCrossorigin = 'crossorigin';
-  var _attrIntegrity   = 'integrity';
+  // default CSS selectors
+  var _txtDOM = '[data-src]';
+  var _txtJS  = _txtScript + '[type=deferjs]';
 
-  // aliases for object methods
-  var _fnForEach    = 'forEach';
-  var _fnGetAttr    = 'getAttribute';
-  var _fnSetAttr    = 'setAttribute';
-  var _fnShift      = 'shift';
+  /*
+  |--------------------------------------------------------------------------
+  | Defines internal variables for holding state of the library
+  |--------------------------------------------------------------------------
+  */
 
-  // default CSS selectors
-  var _selectorDOM  = '[data-src]';
-  var _selectorJS   = '[type=deferjs]';
+  // window event handler
+  var _eventHandler;
 
-  // other reusable variables
-  var _boolFalse    = false;
-  var _txtLink      = 'link';
-  var _txtScript    = 'script';
+  // the IntersectionObserver feature
+  var IntersectionObserver = window.IntersectionObserver;
+
+  // browser features
+  var console  = window.console;
+  var document = window.document || window;
+  var engine   = window.setTimeout;
+
+  // variables that hold the state of Defer
+  var _booted      = (/p/).test(document.readyState);
+  var _queueDefer  = [];
+  var _queueDelay  = [];
+  var _fnSlice     = _queueDefer.slice;
 
   /*
   |--------------------------------------------------------------------------
@@ -100,14 +107,39 @@
   |--------------------------------------------------------------------------
   */
 
+  // performance labels
+  var _debugName  = namespace + ' v' + version;
+  var _perfLabel  = _debugName + ' boot';
+  var _loadLabel  = _debugName + ' waits from booted to the page load event';
+  var _userLabel  = _debugName + ' waits from page loaded to a user event';
+
   function debug() {
-    console.debug.bind(console, _debugName).apply(console, _slice.call(arguments));
+    if (console && 'debug' in console) {
+      console.debug.bind(console, _debugName).apply(console, _fnSlice.call(arguments));
+    }
   }
 
   function log(text, color) {
-    console.log('%c ' + text, 'color:' + color);
+    if (console && 'log' in console) {
+      console.log('%c 🥇 ' + text, 'color:' + color);
+    }
+  }
+
+  function perf_begin(label) {
+    if (console && 'time' in console) {
+      console.debug('Perf: ⏩ ' + label);
+      console.time('Perf: ⏱️ ' + label);
+    }
+  }
+
+  function perf_end(label) {
+    if (console && 'timeEnd' in console) {
+      console.timeEnd('Perf: ⏱️ ' + label);
+    }
   }
 
+  perf_begin(_perfLabel);
+
   /*
   |--------------------------------------------------------------------------
   | Window event handlers
@@ -134,12 +166,12 @@
   log(_debugName + ' is initializing...', '#888');
 
   // the heart of the library
-  function self(func, delay, lazy) {
+  function $(func, delay, lazy) {
     if (_booted) {
       engine(func, delay);
     } else {
       (
-        typeof lazy === 'undefined' && self.lazy || lazy
+        lazy || $.lazy && typeof lazy === 'undefined'
           ? _queueDelay
           : _queueDefer
       ).push(func, delay);
@@ -152,7 +184,7 @@
   |--------------------------------------------------------------------------
   */
 
-  // attachs a DOM node into the <head> tag
+  // attaches a DOM node into the <head> tag
   function fnAttach(node) {
     document.head.appendChild(node);
 
@@ -162,7 +194,7 @@
 
   // loops through all attributes of a DOM node
   function fnAttrIterator(node, callback) {
-    _slice.call(node.attributes)[_fnForEach](callback);
+    _fnSlice.call(node.attributes)[_txtForEach](callback);
   }
 
   // creates a new fresh DOM node
@@ -182,37 +214,40 @@
   }
 
   // creates a preload hint node
-  function fnCreatePreloadNode(node, _temp, _node) {
+  function fnCreatePreloadNode(node, _new, _temp) {
     _temp = node.src;
 
     if (_temp) {
-      // creates a fresh node
-      _node = fnCreateNode(_txtLink);
-
-      // sets attributes
-      _node.rel  = 'preload';
-      _node.as   = _txtScript;
-      _node.href = _temp;
+      // creates a fresh node and its preload attributes
+      _new      = fnCreateNode(_txtLink);
+      _new.rel  = 'preload';
+      _new.as   = _txtScript;
+      _new.href = _temp;
 
-      // copies crossorigin from the original node if exists
-      _temp = node[_fnGetAttr](_attrCrossorigin);
+      // copies the `crossorigin` attribute from the original node
+      _temp = node[_txtGetAttr](_txtXorigin);
 
       if (_temp) {
-        _node[_fnSetAttr](_attrCrossorigin, _temp);
+        _new[_txtSetAttr](_txtXorigin, _temp);
       }
 
-      // copies integrity from the original node if exists
-      _temp = node[_fnGetAttr](_attrIntegrity);
+      // copies the `integrity` attribute from the original node
+      _temp = node[_txtGetAttr](_txtIntegrity);
 
       if (_temp) {
-        _node[_fnSetAttr](_attrIntegrity, _temp);
+        _new[_txtSetAttr](_txtIntegrity, _temp);
       }
 
-      // attaches the new node into the document
-      fnAttach(_node);
+      // attaches the new node to the document
+      fnAttach(_new);
     }
   }
 
+  // a simple DOM query selector
+  function fnQueryAll(selector, parent) {
+    return _fnSlice.call((parent || document).querySelectorAll(selector));
+  }
+
   // replaces a DOM node with a new node
   function fnReplaceNode(currentNode, newNode) {
     currentNode.parentNode.replaceChild(newNode, currentNode);
@@ -221,11 +256,6 @@
     debug('A DOM node has been replaced.', newNode);
   }
 
-  // a simple DOM query selector
-  function fnSelect(selector, parent) {
-    return _slice.call((parent || document).querySelectorAll(selector));
-  }
-
   /*
   |--------------------------------------------------------------------------
   | Utility functions
@@ -235,28 +265,28 @@
   // reveals a DOM node deferred by the library
   function fnDeferReveal(node, unveiledClass) {
     // reveals descendant children nodes
-    fnSelect('source,img', node)[_fnForEach](fnDeferReveal);
+    fnQueryAll('source,img', node)[_txtForEach](fnDeferReveal);
 
     // transforms data-xxx attributes to normal attributes
     fnAttrIterator(node, function (attribute, _matches) {
       _matches = (/^data-(.+)/).exec(attribute.name);
 
       if (_matches) {
-        node[_fnSetAttr](_matches[1], attribute.value);
+        node[_txtSetAttr](_matches[1], attribute.value);
       }
     });
 
+    // debug
+    debug('A DOM node has been unveiled.', node);
+
     // appends new class names
     if (typeof unveiledClass == 'string' && unveiledClass) {
       node.className += ' ' + unveiledClass;
     }
 
-    // debug
-    debug('A DOM node has been unveiled.', node);
-
     // calls load() method to reset the media
-    if (_load in node) {
-      node[_load]();
+    if (_txtLoad in node) {
+      node[_txtLoad]();
     }
   }
 
@@ -268,7 +298,7 @@
     resolver,
     observeOptions
   ) {
-    function _init(_observer) {
+    function __(_observer) {
       // unveils an observed node
       function _unveil(node) {
         if (!resolver || resolver(node) !== _boolFalse) {
@@ -278,11 +308,11 @@
 
       // watches a node for its appeal
       function _observe(node) {
-        if (node[namespace] != self) {
+        if (node[namespace] != $) {
           // marks this element is initialized
-          node[namespace] = self;
+          node[namespace] = $;
 
-          // registers to the observer
+          // observes or unveils a node
           _observer ? _observer.observe(node) : _unveil(node);
         }
       }
@@ -290,7 +320,7 @@
       // creates intersection observer
       if (IntersectionObserver) {
         _observer = new IntersectionObserver(function (nodes) {
-          nodes[_fnForEach](function (entry, _node) {
+          nodes[_txtForEach](function (entry, _node) {
             if (entry.isIntersecting) {
               _node = entry.target;
               _observer.unobserve(_node);
@@ -303,81 +333,89 @@
       }
 
       // collects target nodes and registers them to the observer
-      fnSelect(selector || _selectorDOM)[_fnForEach](_observe);
+      fnQueryAll(selector || _txtDOM)[_txtForEach](_observe);
     }
 
-    // defers the init function without the lazy mode
-    self(_init, delay, _boolFalse);
+    // adds the internal script to the queue
+    // NOTE: the lazy mode should be disable for DOM manipulations
+    $(__, delay, _boolFalse);
   }
 
   // the core of the Defer.all
   function fnDeferScripts(selector, delay, lazy) {
-    function _init(_queueDefer) {
-      function _nextTag(_node, _clone) {
-        // pops the next script tag in front of the queue
-        _node = _queueDefer[_fnShift]();
+    function __(_queueDefer) {
+      var _perfLabel = 'Defer.all(' + (selector || _txtJS) + ', ' + (delay || 0) + ', ' + (lazy ? 'true' : 'false') + ')';
+      perf_begin(_perfLabel);
+
+      function _next(_node, _clone) {
+        // shifts the next script tag in the front of the queue
+        _node = _queueDefer[_txtShift]();
 
         if (_node) {
-          // clones the node
+          // clones the node and its content
           _clone = fnCreateNode(_node.nodeName);
-
-          // copies the text content
           _clone.text = _node.text;
 
           // copies all attributes from the node
           fnAttrIterator(_node, function (attribute) {
             if (attribute.name != 'type') {
-              _clone[_fnSetAttr](attribute.name, attribute.value);
+              _clone[_txtSetAttr](attribute.name, attribute.value);
             }
           });
 
-          // attaches clone node to the document
-          // NOTE: script tag with src and non-async will wait for its execution
-          // NOTE: async attribute MUST be checked via getAttribute()
-          if (_clone.src && !_clone[_fnGetAttr]('async')) {
-            _clone.onload = _clone.onerror = _nextTag;
+          // attaches the cloned script tag to the document
+          // NOTE 1: the async attribute MUST be checked via getAttribute()
+          // NOTE 2: a script tag without src should be loaded async
+          // NOTE 3: a script tag with src and async should be loaded async
+          if (_clone.src && !_clone[_txtGetAttr]('async')) {
+            _clone.onload = _clone.onerror = _next;
             fnReplaceNode(_node, _clone);
           } else {
             fnReplaceNode(_node, _clone);
-            _nextTag();
+            _next();
           }
+        } else {
+          perf_end(_perfLabel);
         }
       }
 
       // collects target script tags for lazy loading
-      _queueDefer = fnSelect(selector || _selectorJS);
+      _queueDefer = fnQueryAll(selector || _txtJS);
 
       // add preload nodes
-      _queueDefer[_fnForEach](fnCreatePreloadNode);
+      _queueDefer[_txtForEach](fnCreatePreloadNode);
 
       // starts the lazy loading script tags
-      _nextTag();
+      _next();
     }
 
-    self(_init, delay, lazy);
+    // adds the internal script to the queue
+    $(__, delay, lazy);
   }
 
   // the core of the Defer.css
   function fnDeferCss(fileUrl, id, delay, onload, lazy) {
-    function _init(_node) {
+    function __(_node) {
       _node      = fnCreateNode(_txtLink, id, onload);
       _node.rel  = 'stylesheet';
       _node.href = fileUrl;
       fnAttach(_node);
     }
 
-    self(_init, delay, lazy);
+    // adds the internal script to the queue
+    $(__, delay, lazy);
   }
 
   // the core of the Defer.js
   function fnDeferJs(fileUrl, id, delay, onload, lazy) {
-    function _init(_node) {
+    function __(_node) {
       _node     = fnCreateNode(_txtScript, id, onload);
       _node.src = fileUrl;
       fnAttach(_node);
     }
 
-    self(_init, delay, lazy);
+    // adds the internal script to the queue
+    $(__, delay, lazy);
   }
 
   /*
@@ -392,31 +430,39 @@
     log(_debugName + ': "' + event.type + '" event was triggered.', '#90f');
 
     if (_windowEvent == event.type) {
+      // debug
+      log(_debugName + ': page has fully loaded!', '#09f');
+      perf_end(_loadLabel);
+
       // removes browser event listening
       fnDetachWindowEvent(_windowEvent);
 
-      // tells the core that the page has fully loaded
-      _booted = self;
-
       // debug
-      log(_debugName + ': page has fully loaded!', '#09f');
       log(_debugName + ': ' + _queueDefer.length / 2 + ' queued task(s) will execute from now!', '#f09');
       log(_debugName + ': ' + _queueDelay.length / 2 + ' other task(s) will be delayed until there is user interaction.', '#f90');
 
-      // debug
-      log(_debugName + ' is now ready!', '#9a3');
+      // tells the core that the page has fully loaded
+      _booted = $;
 
       // adds user events for delayed tasks
-      _userEvents[_fnForEach](fnAttachWindowEvent);
+      _userEvents[_txtForEach](fnAttachWindowEvent);
+      perf_begin(_userLabel);
+
+      // debug
+      log(_debugName + ' is now ready!', '#9a3');
 
       // selects the queue to be served
       _queue = _queueDefer;
     } else {
       // debug
-      log(_debugName + ': ' + _queueDelay.length / 2 + ' delayed task(s) will execute from now!', '#f90');
+      log(_debugName + ': a user interaction detected!', '#09f');
+      perf_end(_userLabel);
 
       // removes user events for delayed tasks
-      _userEvents[_fnForEach](fnDetachWindowEvent);
+      _userEvents[_txtForEach](fnDetachWindowEvent);
+
+      // debug
+      log(_debugName + ': ' + _queueDelay.length / 2 + ' delayed task(s) will execute from now!', '#f90');
 
       // selects the queue to be served
       _queue = _queueDelay;
@@ -424,15 +470,10 @@
 
     // serves all queued tasks
     while (_queue[0]) {
-      engine(_queue[_fnShift](), _queue[_fnShift]());
+      engine(_queue[_txtShift](), _queue[_txtShift]());
     }
   }
 
-  if (!_booted) {
-    // adds an event listener for the page load event
-    fnAttachWindowEvent(_windowEvent);
-  }
-
   /*
   |--------------------------------------------------------------------------
   | Defines defer utility functions will be publicly exposed
@@ -443,16 +484,23 @@
   fnDeferScripts();
 
   // exposes public methods
-  self.all    = fnDeferScripts;
-  self.dom    = fnDeferDom;
-  self.css    = fnDeferCss;
-  self.js     = fnDeferJs;
-  self.reveal = fnDeferReveal;
+  $.all     = fnDeferScripts;
+  $.dom     = fnDeferDom;
+  $.css     = fnDeferCss;
+  $.js      = fnDeferJs;
+  $.reveal  = fnDeferReveal;
 
   // exposes the Defer instance
-  window[namespace] = self;
+  window[namespace] = $;
 
   // debug
   log(_debugName + ' was injected!', '#888');
+  perf_end(_perfLabel);
+
+  if (!_booted) {
+    // adds an event listener for the page load event
+    fnAttachWindowEvent(_windowEvent);
+    perf_begin(_loadLabel);
+  }
 
 })(this);
\ No newline at end of file
diff --git a/src/docs.js b/src/docs.js
index 48b6644..77f15f2 100644
--- a/src/docs.js
+++ b/src/docs.js
@@ -31,13 +31,12 @@
  */
 
 /**
- * 🥇 A super small, super efficient library
- * that helps you lazy load (almost) anything.
- * Core Web Vitals friendly.
+ * 🥇 A JavaScript micro-library that helps you lazy load (almost) anything.
+ * Defer.js is zero-dependency, super-efficient, and Web Vitals friendly.
  *
  * @author    Mai Nhut Tan <shin@shin.company>
  * @copyright 2022 AppSeeds <https://code.shin.company/>
- * @version   3.3.0
+ * @version   3.4.0
  * @license   {@link https://code.shin.company/defer.js/blob/master/LICENSE|MIT}
  */
 
@@ -86,7 +85,7 @@
  * @since    2.0
  * @param    {Function} func - A function to be executed after page fully loaded.
  * @param    {number}   [delay=0] - The time, in milliseconds that it should wait before the function is executed.
- * @param    {boolean}  [waitForInteraction=false] - This argument tells `Defer()` to delay the execution and wait until there is a user interaction.
+ * @param    {boolean}  [waitForUserAction=false] - This argument tells `Defer()` to delay the execution and wait until there is a user interaction.
  * @returns  {void}
  *
  * @example
@@ -146,7 +145,7 @@
  * of deferred scripts until the user starts interacting with the page
  * regardless of the page load event.
  *
- * It will override the default behavior of `waitForInteraction`
+ * It will override the default behavior of `waitForUserAction`
  * argument of the `Defer()` method.
  *
  * Changing this variable will also affect the behavior of these functions:
@@ -180,11 +179,11 @@
  * This trick also works perfectly with `<script>` tags with an `src` attribute.
  *
  * @note (1) To avoid unexpected behavior when using
- * the `Defer.all()` function to delay the execution of script tags,
- * you should call run `Defer.all()` with a regular script tag.
+ * the `Defer.all()` method to delay the execution of script tags,
+ * you should call run the `Defer.all()` method with a regular script tag.
  *
  * @note (2) Lazy loading behavior changed since v3.0
- * when you set `Defer.lazy=true` or `waitForInteraction=true`.
+ * when you set `Defer.lazy=true` or `waitForUserAction=true`.
  * A `<script>` tags with `type="deferjs"` will not execute
  * unless the user starts interacting with your page.
  *
@@ -196,7 +195,7 @@
  * @since    2.0
  * @param    {string} [selector=[type=deferjs]] - A CSS selector selects target script tags that will be Lazy loaded.
  * @param    {number} [delay=0] - The time, in milliseconds that it should wait before a script tag is executed.
- * @param    {boolean}  [waitForInteraction=false] - This argument tells `Defer.all()` to delay the execution of scripts until there is a user interaction.
+ * @param    {boolean}  [waitForUserAction=false] - This argument tells the `Defer.all()` method to delay the execution of scripts until there is a user interaction.
  * @returns  {void}
  *
  * @example
@@ -215,7 +214,7 @@
  * <script type="deferjs">
  *   // your JavaScript will still be here,
  *   // but it will not run unless the user starts interacting with your page.
- *   console.log('This script is lazy loaded with type="deferjs" attribute.');
+ *   console.info('This script is lazy loaded with type="deferjs" attribute.');
  * </script>
  * ```
  *
@@ -223,11 +222,11 @@
  * Using your value for the type attribute, such as `type="my-magic"`:
  *
  * If you hate using the `type="deferjs"` attribute,
- * you can even choose yours by using the `Defer.all()` function.
+ * you can even choose yours by using the `Defer.all()` method.
  *
  * Notice: To avoid unexpected behavior when using
- * the `Defer.all()` function to delay the execution of script tags,
- * you should call run `Defer.all()` with a regular script tag.
+ * the `Defer.all()` method to delay the execution of script tags,
+ * you should call run the `Defer.all()` method with a regular script tag.
  *
  * ```html
  * <script type="my-magic">
@@ -247,18 +246,18 @@
  * ```
  *
  * @example
- * Using `Defer.all()` with script tags with `src` attribute:
+ * Using the `Defer.all()` method for script tags with `src` attribute:
  *
  * Your scripts will work perfectly when you mix inline scripts
  * and script tags with an src attribute, like the below example.
  *
- * The `waitForInteraction` argument (the fifth argument) is set to `true`,
+ * The `waitForUserAction` argument (the fifth argument) is set to `true`,
  * the library will defer the load of the tippy.js library until the user starts
  * interacting, when the user moves his/her mouse on the button, a tooltip will show.
  *
  * Notice: To avoid unexpected behavior when using
- * the `Defer.all()` function to delay the execution of script tags,
- * you should call run `Defer.all()` with a regular script tag.
+ * the `Defer.all()` method to delay the execution of script tags,
+ * you should call run the `Defer.all()` method with a regular script tag.
  *
  *
  * ```html
@@ -286,7 +285,7 @@
  * - Scroll-reveal features, such as handling AJAX updating when a block is entering the viewport.
  * - An element that was deferred by Defer.dom() will be unveiled as soon as the page finished loading.
  *
- * An element that was deferred by `Defer.dom()` will be unveiled
+ * An element that was deferred by the `Defer.dom()` method will be unveiled
  * when it going to enters the browser viewport.
  *
  * The `Defer.dom()` method also converts `data-*` attributes of the elements
@@ -324,7 +323,6 @@
  * ```html
  * <div id="demo-basic">
  *   <img alt="A lazy image" width="200" height="300" loading="lazy"
- *        src=""
  *        data-src="https://picsum.photos/id/1003/200/300">
  *
  *   <img alt="A lazy image with a low-resolution placeholder"
@@ -404,7 +402,7 @@
  * @example
  * Basic usage with adding CSS class.
  *
- * `Defer.dom()` also allows you to add CSS class names when an element is unveiled.
+ * The `Defer.dom()` method also allows you to add CSS class names when an element is unveiled.
  * In this example, we will add some CSS class names to make an `<img>` tag animate.
  *
  * ```html
@@ -489,7 +487,7 @@
  * @example
  * Lazy load a video.
  *
- * With `Defer.dom()`, we can easily defer the load of various media tags, such as a `<video>` tag.
+ * With the `Defer.dom()` method, we can easily defer the load of various media tags, such as a `<video>` tag.
  *
  * ```html
  * <div id="demo-video">
@@ -510,7 +508,7 @@
  * @example
  * Lazy load an iframe.
  *
- * With `Defer.dom()`, we can effortlessly defer the load of iframe tags.
+ * With the `Defer.dom()` method, we can effortlessly defer the load of iframe tags.
  *
  * ```html
  * <div id="demo-iframe">
@@ -522,14 +520,14 @@
  * </div>
  *
  * <script>
- *   Defer.dom('#demo-iframe iframe', 0, 'animate__animated animate__fadeIn');
+ *   Defer.dom('#demo-iframe iframe', 0, 'iframe-loaded');
  * </script>
  * ```
  *
  * @example
  * Lazy load a Youtube video.
  *
- * This example uses `Defer.dom()` to defer a load of a Youtube iframe.
+ * This example uses the `Defer.dom()` method to defer a load of a Youtube iframe.
  *
  * ```html
  * <div id="demo-youtube">
@@ -543,14 +541,14 @@
  * </div>
  *
  * <script>
- *   Defer.dom('#demo-youtube iframe', 0, 'animate__animated animate__fadeIn');
+ *   Defer.dom('#demo-youtube iframe', 0, 'youtube-loaded');
  * </script>
  * ```
  *
  * @example
  * Lazy load a Facebook post.
  *
- * This example uses `Defer.dom()` to defer a load of a Facebook post.
+ * This example uses the `Defer.dom()` method to defer a load of a Facebook post.
  *
  * ```html
  * <div id="demo-facebook">
@@ -563,14 +561,14 @@
  * </div>
  *
  * <script>
- *   Defer.dom('#demo-facebook iframe', 0, 'animate__animated animate__fadeIn');
+ *   Defer.dom('#demo-facebook iframe', 0, 'facebook-loaded');
  * </script>
  * ```
  *
  * @example
  * Lazy load a Discord chat box.
  *
- * This example uses `Defer.dom()` to defer a load of a Discord chat box.
+ * This example uses the `Defer.dom()` method to defer a load of a Discord chat box.
  *
  * ```html
  * <iframe id="discord-widget" title="Discord"
@@ -588,7 +586,7 @@
  * @example
  * Scroll and reveal.
  *
- * `Defer.dom()` also helps you do an action when an element is unveiled.
+ * The `Defer.dom()` method also helps you do an action when an element is unveiled.
  *
  * In this example, when the user scrolls to the bottom of the page,
  * he/she will see a message as soon as an element with `id="surprise-me"` appears.
@@ -596,7 +594,7 @@
  * ```html
  * <script>
  *   Defer.dom('#surprise-me', 1000, 'seen', function(node) {
- *     alert('Yay!\n\nYou have seen all examples.\nHave fun coding with @shinsenter/defer.js!');
+ *     alert('Yay!\n\nYou have seen all examples.\nHave fun with Defer.js!');
  *   });
  * </script>
  * ```
@@ -608,7 +606,7 @@
  * of external CSS files without blocking the page rendering.
  *
  * @note Lazy loading behavior changed since v3.0
- * when you set `Defer.lazy=true` or `waitForInteraction=true`.
+ * when you set `Defer.lazy=true` or `waitForUserAction=true`.
  * The `fileUrl` will not be fetched unless the user starts interacting with your page.
  *
  * @function Defer.css
@@ -617,11 +615,11 @@
  * @param    {string}   [id] - The ID will be assigned to the script tag to avoid downloading the same file multiple times.
  * @param    {number}   [delay=0] - The time, in milliseconds that the page should wait before the CSS file is fetched.
  * @param    {Function} [onload] - The callback function will be executed if the CSS file is successfully loaded.
- * @param    {boolean}  [waitForInteraction=false] - This argument tells `Defer.css()` to delay downloading the CSS file until there is a user interaction.
+ * @param    {boolean}  [waitForUserAction=false] - This argument tells the `Defer.css()` method to delay downloading the CSS file until there is a user interaction.
  * @returns  {void}
  *
  * @example
- * Using `Defer.css()` to lazy load
+ * Using the `Defer.css()` method to lazy load
  * [FontAwesome](https://fontawesome.com/docs/web/setup/get-started) (CSS and some font files).
  *
  * ```html
@@ -641,7 +639,7 @@
  *   var fileUrl = 'https://pro.fontawesome.com/releases/v5.14.0/css/all.css';
  *
  *   Defer.css(fileUrl, 'fa5-css', 0, function() {
- *     console.info('Debug', 'FontAwesome is loaded.'); // debug
+ *     console.info('FontAwesome is loaded.'); // debug
  *   });
  * </script>
  * ```
@@ -653,7 +651,7 @@
  * In this example, we want the download of the
  * [Animate.css library](https://animate.style/#documentation)
  * to wait for the first user interaction with your page
- * so the `waitForInteraction` argument (the fifth argument) is set to `true`.
+ * so the `waitForUserAction` argument (the fifth argument) is set to `true`.
  *
  * When the Animate.css library was downloaded,
  * we will add CSS classes from Animate.css to every tag with `class=".demo"` on the page.
@@ -666,7 +664,7 @@
  *
  *   // This script will lazy load animate.css library.
  *   Defer.css(origin + '/animate.min.css', 'animate-css', 0, function () {
- *     console.info('Debug', 'Animate.css is loaded.'); // debug
+ *     console.info('Animate.css is loaded.'); // debug
  *
  *     // adds animation classes to demo blocks.
  *     Defer.dom('.demo', 100, 'animate__animated animate__fadeIn');
@@ -677,16 +675,16 @@
 
 
 /**
- * We use `Defer.js()` to defer a load of 3rd-party
+ * We use the `Defer.js()` method to defer a load of 3rd-party
  * JavaScript libraries, widgets, add-ons, etc. without blocking the page rendering.
  *
- * @note (1) Because the download of a file using `Defer.js()` function is asynchronous,
- * to avoid dependency error when lazy loading a third-party library using `Defer.js()`,
+ * @note (1) Because the download of a file using the `Defer.js()` method is asynchronous,
+ * to avoid dependency error when lazy loading a third-party library using the `Defer.js()` method,
  * it is highly recommended that the `onload` callback function be used
  * to make sure that the library you needed is completely defined.
  *
  * @note (2) Lazy loading behavior changed since v3.0
- * when you set `Defer.lazy=true` or `waitForInteraction=true`.
+ * when you set `Defer.lazy=true` or `waitForUserAction=true`.
  * The `fileUrl` will not be fetched unless the user starts interacting with your page.
  *
  * @function Defer.js
@@ -695,16 +693,16 @@
  * @param    {string}   [id] - The ID will be assigned to the script tag to avoid downloading the same file multiple times.
  * @param    {number}   [delay=0] - The time, in milliseconds that the page should wait before the JS file is fetched.
  * @param    {Function} [onload] - The callback function will be executed if the js file is successfully loaded.
- * @param    {boolean}  [waitForInteraction=false] - This argument tells `Defer.js()` to delay downloading the JS file until there is a user interaction.
+ * @param    {boolean}  [waitForUserAction=false] - This argument tells the `Defer.js()` method to delay downloading the JS file until there is a user interaction.
  * @returns  {void}
  *
  * @example
  * An alternative way to lazy load Google Tag Manager script.
  *
- * Using `Defer.js()` to lazy load Google Tag Manager library and its external scripts.
+ * Using the `Defer.js()` method to lazy load Google Tag Manager library and its external scripts.
  *
  * In this example, we want the GTM to execute as soon as the page is loaded
- * so the `waitForInteraction` argument (the fifth argument) is set to `false`.
+ * so the `waitForUserAction` argument (the fifth argument) is set to `false`.
  *
  * ```html
  * <script>
@@ -714,7 +712,7 @@
  *   dataLayer.push(['config', GTM_ID]);
  *
  *   Defer.js('https://www.googletagmanager.com/gtag/js?id=' + GTM_ID, 'google-tag', 0, function() {
- *     console.info('Debug', 'Google Tag Manager is loaded.'); // debug
+ *     console.info('Google Tag Manager is loaded.'); // debug
  *   }, false);
  * </script>
  * ```
@@ -722,11 +720,11 @@
  * @example
  * Lazy load AddThis add-on.
  *
- * Using `Defer.js()` to lazy load
+ * 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 `waitForInteraction` argument (the fifth argument) is set to `true`).
+ * (the `waitForUserAction` argument (the fifth argument) is set to `true`).
  *
  * ```html
  * <div class="demo-addthis"></div>
@@ -736,7 +734,7 @@
  *   var loaded  = false;
  *
  *   Defer.js(fileUrl, 'addthis-js', 0, function() {
- *     console.info('Debug', 'AddThis add-on is loaded.'); // debug
+ *     console.info('AddThis add-on is loaded.'); // debug
  *   }, true);
  * </script>
  * ```
@@ -762,13 +760,13 @@
  *
  *   // this script will lazy load Prism.js library and its dark theme.
  *   // when loading is done, it will apply code formatting to every <code> tag.
- *   var origin = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0';
+ *   var origin = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0';
  *   Defer.css(origin + '/themes/prism-tomorrow.min.css', 'prism-css');
  *   Defer.js(origin + '/prism.min.js', 'prism-js', 0, function () {
- *     console.info('Debug', 'Prism.js is loaded.'); // debug
- *
  *     // enables code highlighting for code tags using Defer.dom()
  *     Defer.dom('pre code', 100, 'ide-loaded', Prism.highlightElement, {rootMargin: "120%"});
+ *
+ *     console.info('Prism.js is loaded.'); // debug
  *   });
  * </script>
  * ```
diff --git a/src/fallback.js b/src/fallback.js
index 5b081d1..12ca6cb 100644
--- a/src/fallback.js
+++ b/src/fallback.js
@@ -37,7 +37,8 @@
 (function (window, Defer) {
 
   /**
-   * Deprecated since version 2.0
+   * Deprecated from version 2.0
+   *
    * @deprecated
    * @function defer
    * @alias    Defer
@@ -49,7 +50,8 @@
   Defer = window.defer = window.Defer;
 
   /**
-   * Deprecated since version 2.0
+   * Deprecated from version 2.0
+   *
    * @deprecated
    * @function deferimg
    * @alias    Defer.dom
@@ -63,7 +65,8 @@
    */
 
   /**
-   * Deprecated since version 2.0
+   * Deprecated from version 2.0
+   *
    * @deprecated
    * @function deferiframe
    * @alias    Defer.dom
@@ -78,7 +81,8 @@
   window.deferimg = window.deferiframe = Defer.dom;
 
   /**
-   * Deprecated since version 2.0
+   * Deprecated from version 2.0
+   *
    * @deprecated
    * @function deferstyle
    * @alias    Defer.css
@@ -92,7 +96,8 @@
   window.deferstyle = Defer.css;
 
   /**
-   * Deprecated since version 2.0
+   * Deprecated from version 2.0
+   *
    * @deprecated
    * @function deferscript
    * @alias    Defer.js