Browse Source

docs(help/feature): expand fetch-inject example

pull/149/head
Josh Habdas 2 years ago
parent
commit
1a5ecbc12f
Signed by: jhabdas GPG Key ID: B148B31154C75A74
1 changed files with 28 additions and 8 deletions
  1. +28
    -8
      docs/content/feature/fetch-injection.md

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

@ -6,15 +6,15 @@ tags = ["performance", "styles"]
features = ["snippets", "related content", "code highlighter"]
+++
After Dark uses the {{< external rel="external help" href="https://git.habd.as/jhabdas/fetch-inject" text="Fetch Inject" />}} library to load and execute external scripts and styles faster than browsers are natively capable of themselves.
After Dark uses the {{< external rel="external help" href="https://git.habd.as/jhabdas/fetch-inject" text="Fetch Inject" />}} library to load and execute external scripts and styles faster than browsers are capable of otherwise.
{{< external href="https://hackcabin.com/post/managing-async-dependencies-javascript/" text="Fetch Injection" />}} was conceptualized and first developed specifically for After Dark to make it possible to deep-link to full-sized [PhotoSwipe Gallery](/module/hall-of-mirrors) images near-instantly and some other useful performance applications:
{{< external href="https://hackcabin.com/post/managing-async-dependencies-javascript/" text="Fetch Injection" />}} was conceptualized and developed for After Dark to make it possible to deep-link to full-sized [Image Gallery](/module/hall-of-mirrors) images without blocking page load and has other performance applications:
<table>
<thead>
<tr>
<th rowspan="2" scope="col">Use Case</th>
<th colspan="2" scope="col">Google Chrome Performance Comparison</th>
<th colspan="2" scope="col">Chrome Performance Comparison (4G simulated connection speed)</th>
</tr>
<tr>
<th scope="col">Without Fetch Inject</th>
@ -28,14 +28,34 @@ After Dark uses the {{< external rel="external help" href="https://git.habd.as/j
</tbody>
</table>
Use Fetch Inject in your [Custom Layouts](../custom-layouts) to load scripts and styles from your site `static` directory or include cross-origin resources:
Use Fetch Inject in your [Custom Layouts](../custom-layouts) to load scripts and styles cross-origin or from your site `static` directory.
Given the following `static` folder contents:
```
├── layouts
├── static
│ ├── js
│ │ ├── jquery.slim.min.js
│ │ ├── tether.min.js
│ │ └── bootstrap.min.js
│ └── css
│ └── font-awesome.min.css
└── themes
```
You can dynamically load the entire Bootstrap 4 library including with Web Fonts on-the-fly:
{{< highlight html "linenos=inline" >}}
<script>
fetchInject(['/js/baffle.min.js']).then(() => {
baffle('header h1').start().reveal(1000);
})
fetchInject(['/js/bootstrap.min.js'],
fetchInject([
'jquery.slim.min.js',
'tether.min.js',
'font-awesome.min.css'
])
])
</script>
{{< /highlight >}}
Fetch Inject is non-blocking, has 0 dependencies and is already included for use on all pages within After Dark. See {{< external rel="external help" href="https://git.habd.as/jhabdas/fetch-inject" text="Fetch Inject" />}} for additional use cases.
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.

Loading…
Cancel
Save