Update docs (#110)

Author: shinsenter

README.md

@@ -16,7 +16,7 @@
 [![NPM](https://nodei.co/npm/@shinsenter/defer.js.png?downloads=true)](https://www.npmjs.com/package/@shinsenter/defer.js)
 
 - **Package**: [@shinsenter/defer.js](https://www.npmjs.com/package/@shinsenter/defer.js)
-- **Version**: 3.0.0
+- **Version**: 3.1.0
 - **Author**: Mai Nhut Tan <[email protected]>
 - **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.0.0/dist/defer.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.1.0/dist/defer.min.js"></script>
 
   <!-- ... -->
 </head>
@@ -96,7 +96,7 @@ Because `defer.min.js` is optimized to very tiny file size, you can even inline
   <title>My Awesome Page</title>
 
   <!-- Copy the script from below URL -->
-  <!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.0.0/dist/defer.min.js -->
+  <!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.1.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.0.0/dist/defer_plus.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.1.0/dist/defer_plus.min.js"></script>
 
   <!-- ... -->
 </head>
@@ -132,7 +132,7 @@ right after the `defer.min.js` script tag as following example:
 
 <!-- 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.0.0/dist/polyfill.min.js"><\/script>');</script>
+<script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.1.0/dist/polyfill.min.js"><\/script>');</script>
 ```
 
 *HINT*: Modern browsers support `IntersectionObserver` feature,
@@ -195,7 +195,7 @@ as soon as the page finished loading.
 </script>
 ```
 **Example**  
-Sometimes, you would like your code not to run unless there is user activity.
+Sometimes, you would like your code not to run unless there is a user activity.
 
 The third argument tells the `Defer()` to delay the execution of the function
 and wait until the user starts interacting with your page.
@@ -236,7 +236,7 @@ and wait until the user starts interacting with your page.
 ### Defer.lazy : <code>boolean</code>
 The `Defer.lazy` variable was added since v3.0.
 
-Setting `Defer.lazy = true` tells the library to delay the execution
+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.
 
@@ -274,7 +274,8 @@ You can fully defer any script tag by setting its `type` attribute to `deferjs`.
 This trick also works perfectly with `<script>` tags with a `src` attribute.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
-**Note**: Lazy loading behavior changed since v3.0 when you set `Defer.lazy=true`.
+**Note**: Lazy loading behavior changed since v3.0
+when you set `Defer.lazy=true` or `waitForInteraction=true`.
 A `<script>` tags with `type="deferjs"` will not execute
 unless the user starts interacting with your page.  
 **Since**: 2.0  
@@ -325,6 +326,31 @@ If you hate using the `type="deferjs"` attribute, you can even choose your own o
   Defer.all('script[type="my-magic"]', 5000);
 </script>
 ```
+**Example**  
+Using `Defer.all()` with script tags with `src` attribute:
+
+Your scripts will work perfectly when you mix inline scripts
+and script tags with a src attribute, like the below example.
+
+The `waitForInteraction` argument (the fifth argument) is set to `true`,
+the library will defer the load of the tippy.js library until user starts
+interacting, when user moves his/her mouse on the button, a tooltip wil show.
+
+
+```html
+<button id="tooltip-button">My button</button>
+
+<script type="myscript" src="https://unpkg.com/@popperjs/core@2"></script>
+<script type="myscript" src="https://unpkg.com/tippy.js@6"></script>
+
+<script type="myscript">
+  tippy('#tooltip-button', { content: 'Hello from Defer.js!' });
+</script>
+
+<script>
+  Defer.all('script[type="myscript"]', 0, true);
+</script>
+```
 
 * * *
 
@@ -652,7 +678,8 @@ We use the `Defer.css()` method to defer the 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`.
+**Note**: Lazy loading behavior changed since v3.0
+when you set `Defer.lazy=true` or `waitForInteraction=true`.
 The `fileUrl` will not be fetched unless the user starts interacting with your page.  
 **Since**: 2.0  
 
@@ -726,7 +753,12 @@ We use `Defer.js()` to defer the load of 3rd-party
 javascript libraries, widgets, add-ons, etc. 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`.
+**Note**: Because the download of file using `Defer.js()` function is asynchronous,
+to avoid dependency error when lazy loading a third-party library using `Defer.js()`,
+it is highly recommended that the `onload` callback function be used
+to make sure that the library you needed is completely defined.  
+**Note**: Lazy loading behavior changed since v3.0
+when you set `Defer.lazy=true` or `waitForInteraction=true`.
 The `fileUrl` will not be fetched unless the user starts interacting with your page.  
 **Since**: 2.0  
 
@@ -783,7 +815,8 @@ AddThis add-on will not be loaded until the user starts interacting with the pag
 Lazy load Prism.js library.
 
 Using Defer.js to lazy load Prism.js library and its assets.
-The `<code>` blocks on the page will be rendered only when you scroll to their positions.
+The `<code>` blocks on the page will be rendered
+only when the user scrolls to any `code` block position.
 
 ```html
 <style>

demo/index.html

@@ -42,18 +42,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.0.0/dist/defer.min.js">the library URL</a>
+                        href="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.1.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 very tiny file size,
                     you can even inline entire the library to save one HTTP request.
                 </div>
                 <div class="demo">
 <!-- Copy the script from below URL -->
-<!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.0.0/dist/defer.min.js -->
+<!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.1.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.0.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.1.0/dist/polyfill.min.js"><\/script>');</script>
                 </div>
             </div>
         </section>
@@ -96,8 +96,11 @@ <h3>Using your own type, such as <mark><code>type="my-magic"</code></mark>:</h3>
                     If you hate using the <mark><code>type="deferjs"</code></mark> attribute,
                     you can even choose your own one.
                     <br>
+                    <code>Defer.all(cssSelector, [delay], [waitForInteraction])</code>
+                    <br>
                     <strong>Note: </strong>
-                    Lazy loading behavior changed since v3.0 when you set <code>Defer.lazy=true</code>. <br>
+                    Lazy loading behavior changed since v3.0
+                    when you set <code>Defer.lazy=true</code> or <code>waitForInteraction=true</code>. <br>
                     <code>&lt;script&gt;</code> tags deferred with this technique
                     will not execute unless the user starts interacting with your page.
                 </div>
@@ -115,6 +118,29 @@ <h3>Using your own type, such as <mark><code>type="my-magic"</code></mark>:</h3>
 <!-- The 2nd argument means those script tag will be delayed 5000ms -->
 <script>
     Defer.all('script[type="my-magic"]', 5000);
+</script>
+                </div>
+            </div>
+
+            <div class="example">
+                <h3>Using <code>Defer.all</code> with script tags with <code>src</code> attribute:</h3>
+                <div class="helper">
+                    Your scripts will work perfectly when mixing inline scripts
+                    and script tags with a <code>src</code> attribute,
+                    like the below example.
+                    <br>
+                    The library will defer the load of tippy.js until user starts interacting,
+                    when user moves his/her mouse on the button, a tooltip will show.
+                </div>
+                <div class="demo">
+<button id="tooltip-button">My button</button>
+<script type="myscript" src="https://unpkg.com/@popperjs/core@2"></script>
+<script type="myscript" src="https://unpkg.com/tippy.js@6"></script>
+<script type="myscript">
+    tippy('#tooltip-button', { content: 'Hello from Defer.js!' });
+</script>
+<script>
+    Defer.all('script[type="myscript"]', 0, true);
 </script>
                 </div>
             </div>
@@ -191,7 +217,7 @@ <h3>Wait until the user starts interacting:</h3>
             <div class="example">
                 <h3>The variable <code>Defer.lazy</code></h3>
                 <div class="helper">
-                    Setting <code>Defer.lazy = true</code> tells the library
+                    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>
@@ -542,7 +568,8 @@ <h2><code>Defer.css(fileUrl, [id], [delay], [onload], [waitForInteraction])</cod
                 We use <code>Defer.css</code> to defer the 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>
+                Lazy loading behavior changed since v3.0
+                when you set <code>Defer.lazy=true</code> or <code>waitForInteraction=true</code>. <br>
                 The <code>fileUrl</code> will not be fetched unless the user starts interacting with your page.
             </div>
 
@@ -607,8 +634,15 @@ <h2><code>Defer.js(fileUrl, [id], [delay], [onload], [waitForInteraction])</code
             <div class="helper">
                 We use <code>Defer.js</code> to defer the load of 3rd-party javascript libraries, add-ons etc. 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>
+                <strong>Note 1: </strong>
+                Because the download of file using <code>Defer.js</code> function is asynchronous,
+                to avoid dependency error when lazy loading a library using <code>Defer.js</code>,
+                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>
                 The <code>fileUrl</code> will not be fetched unless the user starts interacting with your page.
             </div>