Browse Source

docs(help/feature): add complex fetch-inject example

Josh Habdas 2 years ago
parent
commit
0c99b5e95a
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74
1 changed files with 15 additions and 8 deletions
  1. 15
    8
      docs/content/feature/fetch-injection.md

+ 15
- 8
docs/content/feature/fetch-injection.md View File

@@ -44,18 +44,25 @@ Given the following `static` folder contents:
44 44
 └── themes
45 45
 ```
46 46
 
47
-You can dynamically load the entire Bootstrap 4 library including with Web Fonts on-the-fly:
47
+You can load Bootstrap (w/Font Awesome) and show how long ago it finished:
48 48
 
49 49
 {{< highlight html "linenos=inline" >}}
50 50
 <script>
51
-  fetchInject(['/js/bootstrap.min.js'],
52
-    fetchInject([
53
-      'jquery.slim.min.js',
54
-      'tether.min.js',
55
-      'font-awesome.min.css'
56
-    ])
51
+  fetchInject([
52
+    'https://cdn.jsdelivr.net/lodash/latest/lodash.min.js',
53
+    'https://cdn.jsdelivr.net/momentjs/latest/moment.min.js'
57 54
   ])
55
+  .then(() => {
56
+    const start = moment();
57
+    fetchInject(['/js/bootstrap.min.js'],
58
+      fetchInject([
59
+        'jquery.slim.min.js',
60
+        'tether.min.js',
61
+        'font-awesome.min.css'
62
+      ])
63
+    ).then(console.log(`Bootstrap Loaded: ${_.capitalize(start.toNow())}.`));
64
+  });
58 65
 </script>
59 66
 {{< /highlight >}}
60 67
 
61
-Fetch Inject is non-blocking, has 0 dependencies and is included on all pages within After Dark by default. See {{< external rel="external help" href="https://git.habd.as/jhabdas/fetch-inject" text="Fetch Inject" />}} for additional use cases.
68
+Fetch Inject is 555 bytes compressed, non-blocking and included by default in [Custom Layouts](../custom-layouts). Visit the {{< external href="https://codepen.io/jhabdas/pen/MpVeOE?editors=0012" text="CodePen Playground" />}} to try it out.

Loading…
Cancel
Save