Updated readme

shinsenter · Apr 1, 2021 · 8893695 · 8893695
1 parent 3bf6868
commit 8893695
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 91 deletions.
diff --git a/README.md b/README.md
@@ -205,13 +205,16 @@ Defer(function() {
 <a name="Defer.all"></a>
 
 ### Defer.all([selector]) ⇒ <code>void</code>
-By default, this function is triggered automatically.
+This function is useful for lazy-loading script tags.
 
 All script tags with attribute `<script type="deferjs">`
 will be delayed and automatically executed
 as soon as the page has completely loaded.
 
-This function is useful for lazy-loading script tags.
+By default, this function is triggered automatically.
+
+Note: For customized deferjs type,
+please call `Defer.all()` at the bottom of the `<body>` tag.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
 **Since**: 2.0  
@@ -226,29 +229,33 @@ or add `type="deferjs"` to your script tag for it to take effect.
 
 Before:
 ```html
-<script type="text/javascript" src="heavy-library.js"></script>
-<script>// heavy script here </script>
+<script type="text/javascript" src="/path/to/heavy-javascript.js"></script>
+<script>
+    // Some heavy DOM manipulations here
+</script>
 ```
 After:
 ```html
-<script type="deferjs" src="heavy-library.js"></script>
-<script type="deferjs">// heavy script here </script>
+<script type="deferjs" src="/path/to/heavy-javascript.js"></script>
+<script type="deferjs">
+    // Some heavy DOM manipulations here
+</script>
 ```
 **Example**  
 If you don't want the `<script type="deferjs">` syntax,
-you can easily choose your own type.
+you can easily choose your own name.
 
 This example uses `type="myjs"` instead of `type="deferjs"`:
 ```html
-<script type="myjs" src="heavy-library.js"></script>
-<script type="myjs">// heavy script here </script>
+<script type="myjs" src="/path/to/heavy-javascript.js"></script>
+<script type="myjs">
+    // Some heavy DOM manipulations here
+</script>
 
 <!-- Call Defer.all() at the bottom of the `<body>` tag -->
 <script>Defer.all('script[type="myjs"]');</script>
 ```
 
-Note: Please call `Defer.all()` at the bottom of the `<body>` tag.
-
 * * *
 
 <a name="Defer.js"></a>
@@ -375,13 +382,13 @@ Lazy load background image of a `div` tag.
 ```html
 <style>
   #my_div {
-    width: 300;
-    height: 200;
+    width: 300px;
+    height: 200px;
   }
 </style>
 
 <script>
-  // Lazy load div tag which has `id="my_div"`
+  // Lazy load div tag which has id="my_div"
   Defer.dom('#my_div');
 </script>
 
@@ -398,30 +405,30 @@ Delay lazy loading `<img>` tags 200ms after the page has completely loaded.
 Then it will add a CSS class `loaded` to the fully lazy loaded image element.
 
 ```html
-<script>Defer.dom('img.lazy-extra', 200, 'loaded');</script>
+<script>Defer.dom('img.lazy', 200, 'loaded');</script>
 
 <!-- Here may be a very long content -->
 
-<img class="lazy-extra" alt="Photo 1" data-src="https://picsum.photos/200/300?random=4" width="200" height="300" />
-<img class="lazy-extra" alt="Photo 2" data-src="https://picsum.photos/200/300?random=5" width="200" height="300" />
-<img class="lazy-extra" alt="Photo 3" data-src="https://picsum.photos/200/300?random=6" width="200" height="300" />
+<img class="lazy" alt="Photo 1" data-src="https://picsum.photos/200/300?random=4" width="200" height="300" />
+<img class="lazy" alt="Photo 2" data-src="https://picsum.photos/200/300?random=5" width="200" height="300" />
+<img class="lazy" alt="Photo 3" data-src="https://picsum.photos/200/300?random=6" width="200" height="300" />
 ```
 **Example**  
 Advanced usage: Lazy load with [Intersection observer options](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options)
 
 ```html
 <script>
   // Preload images within 200% of the current viewport size.
-  Defer.dom("img.lazy-sooner", 200, "loaded", null, {
+  Defer.dom("img.early-lazy", 200, "loaded", null, {
     rootMargin: "200%"
   });
 </script>
 
 <!-- Here may be a very long content -->
 
-<img class="lazy-sooner" alt="Photo 1" data-src="https://picsum.photos/200/300?random=7" width="200" height="300" />
-<img class="lazy-sooner" alt="Photo 2" data-src="https://picsum.photos/200/300?random=8" width="200" height="300" />
-<img class="lazy-sooner" alt="Photo 3" data-src="https://picsum.photos/200/300?random=9" width="200" height="300" />
+<img class="early-lazy" alt="Photo 1" data-src="https://picsum.photos/200/300?random=7" width="200" height="300" />
+<img class="early-lazy" alt="Photo 2" data-src="https://picsum.photos/200/300?random=8" width="200" height="300" />
+<img class="early-lazy" alt="Photo 3" data-src="https://picsum.photos/200/300?random=9" width="200" height="300" />
 ```
 **Example**  
 We can use CSS class that added to the lazy loaded element
@@ -539,6 +546,9 @@ Defer.reveal(node);
 document.querySelectorAll('.multi-lazy').forEach(function(node) {
   Defer.reveal(node);
 });
+
+// Or even shorter way
+document.querySelectorAll('.multi-lazy').forEach(Defer.reveal);
 ```
 
 * * *

diff --git a/docs/apis.md b/docs/apis.md
@@ -67,13 +67,16 @@ Defer(function() {
 <a name="Defer.all"></a>
 
 ### Defer.all([selector]) ⇒ <code>void</code>
-By default, this function is triggered automatically.
+This function is useful for lazy-loading script tags.
 
 All script tags with attribute `<script type="deferjs">`
 will be delayed and automatically executed
 as soon as the page has completely loaded.
 
-This function is useful for lazy-loading script tags.
+By default, this function is triggered automatically.
+
+Note: For customized deferjs type,
+please call `Defer.all()` at the bottom of the `<body>` tag.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
 **Since**: 2.0  
@@ -88,29 +91,33 @@ or add `type="deferjs"` to your script tag for it to take effect.
 
 Before:
 ```html
-<script type="text/javascript" src="heavy-library.js"></script>
-<script>// heavy script here </script>
+<script type="text/javascript" src="/path/to/heavy-javascript.js"></script>
+<script>
+    // Some heavy DOM manipulations here
+</script>
 ```
 After:
 ```html
-<script type="deferjs" src="heavy-library.js"></script>
-<script type="deferjs">// heavy script here </script>
+<script type="deferjs" src="/path/to/heavy-javascript.js"></script>
+<script type="deferjs">
+    // Some heavy DOM manipulations here
+</script>
 ```
 **Example**  
 If you don't want the `<script type="deferjs">` syntax,
-you can easily choose your own type.
+you can easily choose your own name.
 
 This example uses `type="myjs"` instead of `type="deferjs"`:
 ```html
-<script type="myjs" src="heavy-library.js"></script>
-<script type="myjs">// heavy script here </script>
+<script type="myjs" src="/path/to/heavy-javascript.js"></script>
+<script type="myjs">
+    // Some heavy DOM manipulations here
+</script>
 
 <!-- Call Defer.all() at the bottom of the `<body>` tag -->
 <script>Defer.all('script[type="myjs"]');</script>
 ```
 
-Note: Please call `Defer.all()` at the bottom of the `<body>` tag.
-
 * * *
 
 <a name="Defer.js"></a>
@@ -237,13 +244,13 @@ Lazy load background image of a `div` tag.
 ```html
 <style>
   #my_div {
-    width: 300;
-    height: 200;
+    width: 300px;
+    height: 200px;
   }
 </style>
 
 <script>
-  // Lazy load div tag which has `id="my_div"`
+  // Lazy load div tag which has id="my_div"
   Defer.dom('#my_div');
 </script>
 
@@ -260,30 +267,30 @@ Delay lazy loading `<img>` tags 200ms after the page has completely loaded.
 Then it will add a CSS class `loaded` to the fully lazy loaded image element.
 
 ```html
-<script>Defer.dom('img.lazy-extra', 200, 'loaded');</script>
+<script>Defer.dom('img.lazy', 200, 'loaded');</script>
 
 <!-- Here may be a very long content -->
 
-<img class="lazy-extra" alt="Photo 1" data-src="https://picsum.photos/200/300?random=4" width="200" height="300" />
-<img class="lazy-extra" alt="Photo 2" data-src="https://picsum.photos/200/300?random=5" width="200" height="300" />
-<img class="lazy-extra" alt="Photo 3" data-src="https://picsum.photos/200/300?random=6" width="200" height="300" />
+<img class="lazy" alt="Photo 1" data-src="https://picsum.photos/200/300?random=4" width="200" height="300" />
+<img class="lazy" alt="Photo 2" data-src="https://picsum.photos/200/300?random=5" width="200" height="300" />
+<img class="lazy" alt="Photo 3" data-src="https://picsum.photos/200/300?random=6" width="200" height="300" />
 ```
 **Example**  
 Advanced usage: Lazy load with [Intersection observer options](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options)
 
 ```html
 <script>
   // Preload images within 200% of the current viewport size.
-  Defer.dom("img.lazy-sooner", 200, "loaded", null, {
+  Defer.dom("img.early-lazy", 200, "loaded", null, {
     rootMargin: "200%"
   });
 </script>
 
 <!-- Here may be a very long content -->
 
-<img class="lazy-sooner" alt="Photo 1" data-src="https://picsum.photos/200/300?random=7" width="200" height="300" />
-<img class="lazy-sooner" alt="Photo 2" data-src="https://picsum.photos/200/300?random=8" width="200" height="300" />
-<img class="lazy-sooner" alt="Photo 3" data-src="https://picsum.photos/200/300?random=9" width="200" height="300" />
+<img class="early-lazy" alt="Photo 1" data-src="https://picsum.photos/200/300?random=7" width="200" height="300" />
+<img class="early-lazy" alt="Photo 2" data-src="https://picsum.photos/200/300?random=8" width="200" height="300" />
+<img class="early-lazy" alt="Photo 3" data-src="https://picsum.photos/200/300?random=9" width="200" height="300" />
 ```
 **Example**  
 We can use CSS class that added to the lazy loaded element
@@ -401,6 +408,9 @@ Defer.reveal(node);
 document.querySelectorAll('.multi-lazy').forEach(function(node) {
   Defer.reveal(node);
 });
+
+// Or even shorter way
+document.querySelectorAll('.multi-lazy').forEach(Defer.reveal);
 ```
 
 * * *

diff --git a/docs/index.md b/docs/index.md
@@ -205,13 +205,16 @@ Defer(function() {
 <a name="Defer.all"></a>
 
 ### Defer.all([selector]) ⇒ <code>void</code>
-By default, this function is triggered automatically.
+This function is useful for lazy-loading script tags.
 
 All script tags with attribute `<script type="deferjs">`
 will be delayed and automatically executed
 as soon as the page has completely loaded.
 
-This function is useful for lazy-loading script tags.
+By default, this function is triggered automatically.
+
+Note: For customized deferjs type,
+please call `Defer.all()` at the bottom of the `<body>` tag.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
 **Since**: 2.0  
@@ -226,29 +229,33 @@ or add `type="deferjs"` to your script tag for it to take effect.
 
 Before:
 ```html
-<script type="text/javascript" src="heavy-library.js"></script>
-<script>// heavy script here </script>
+<script type="text/javascript" src="/path/to/heavy-javascript.js"></script>
+<script>
+    // Some heavy DOM manipulations here
+</script>
 ```
 After:
 ```html
-<script type="deferjs" src="heavy-library.js"></script>
-<script type="deferjs">// heavy script here </script>
+<script type="deferjs" src="/path/to/heavy-javascript.js"></script>
+<script type="deferjs">
+    // Some heavy DOM manipulations here
+</script>
 ```
 **Example**  
 If you don't want the `<script type="deferjs">` syntax,
-you can easily choose your own type.
+you can easily choose your own name.
 
 This example uses `type="myjs"` instead of `type="deferjs"`:
 ```html
-<script type="myjs" src="heavy-library.js"></script>
-<script type="myjs">// heavy script here </script>
+<script type="myjs" src="/path/to/heavy-javascript.js"></script>
+<script type="myjs">
+    // Some heavy DOM manipulations here
+</script>
 
 <!-- Call Defer.all() at the bottom of the `<body>` tag -->
 <script>Defer.all('script[type="myjs"]');</script>
 ```
 
-Note: Please call `Defer.all()` at the bottom of the `<body>` tag.
-
 * * *
 
 <a name="Defer.js"></a>
@@ -375,13 +382,13 @@ Lazy load background image of a `div` tag.
 ```html
 <style>
   #my_div {
-    width: 300;
-    height: 200;
+    width: 300px;
+    height: 200px;
   }
 </style>
 
 <script>
-  // Lazy load div tag which has `id="my_div"`
+  // Lazy load div tag which has id="my_div"
   Defer.dom('#my_div');
 </script>
 
@@ -398,30 +405,30 @@ Delay lazy loading `<img>` tags 200ms after the page has completely loaded.
 Then it will add a CSS class `loaded` to the fully lazy loaded image element.
 
 ```html
-<script>Defer.dom('img.lazy-extra', 200, 'loaded');</script>
+<script>Defer.dom('img.lazy', 200, 'loaded');</script>
 
 <!-- Here may be a very long content -->
 
-<img class="lazy-extra" alt="Photo 1" data-src="https://picsum.photos/200/300?random=4" width="200" height="300" />
-<img class="lazy-extra" alt="Photo 2" data-src="https://picsum.photos/200/300?random=5" width="200" height="300" />
-<img class="lazy-extra" alt="Photo 3" data-src="https://picsum.photos/200/300?random=6" width="200" height="300" />
+<img class="lazy" alt="Photo 1" data-src="https://picsum.photos/200/300?random=4" width="200" height="300" />
+<img class="lazy" alt="Photo 2" data-src="https://picsum.photos/200/300?random=5" width="200" height="300" />
+<img class="lazy" alt="Photo 3" data-src="https://picsum.photos/200/300?random=6" width="200" height="300" />
 ```
 **Example**  
 Advanced usage: Lazy load with [Intersection observer options](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options)
 
 ```html
 <script>
   // Preload images within 200% of the current viewport size.
-  Defer.dom("img.lazy-sooner", 200, "loaded", null, {
+  Defer.dom("img.early-lazy", 200, "loaded", null, {
     rootMargin: "200%"
   });
 </script>
 
 <!-- Here may be a very long content -->
 
-<img class="lazy-sooner" alt="Photo 1" data-src="https://picsum.photos/200/300?random=7" width="200" height="300" />
-<img class="lazy-sooner" alt="Photo 2" data-src="https://picsum.photos/200/300?random=8" width="200" height="300" />
-<img class="lazy-sooner" alt="Photo 3" data-src="https://picsum.photos/200/300?random=9" width="200" height="300" />
+<img class="early-lazy" alt="Photo 1" data-src="https://picsum.photos/200/300?random=7" width="200" height="300" />
+<img class="early-lazy" alt="Photo 2" data-src="https://picsum.photos/200/300?random=8" width="200" height="300" />
+<img class="early-lazy" alt="Photo 3" data-src="https://picsum.photos/200/300?random=9" width="200" height="300" />
 ```
 **Example**  
 We can use CSS class that added to the lazy loaded element
@@ -539,6 +546,9 @@ Defer.reveal(node);
 document.querySelectorAll('.multi-lazy').forEach(function(node) {
   Defer.reveal(node);
 });
+
+// Or even shorter way
+document.querySelectorAll('.multi-lazy').forEach(Defer.reveal);
 ```
 
 * * *