Fetch Injection

After Dark uses the Fetch Inject library to load and execute external scripts and styles faster than browsers are capable of otherwise.

Fetch Injection was conceptualized and developed for After Dark to make it possible to deep-link to full-sized Image Gallery images without blocking page load and has other performance applications:

Use Fetch Inject in your 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 load Bootstrap (w/Font Awesome) and show how long ago it finished:

 1<script>
 2  fetchInject([
 3    'https://cdn.jsdelivr.net/lodash/latest/lodash.min.js',
 4    'https://cdn.jsdelivr.net/momentjs/latest/moment.min.js'
 5  ])
 6  .then(() => {
 7    const start = moment();
 8    fetchInject(['/js/bootstrap.min.js'],
 9      fetchInject([
10        '/js/jquery.slim.min.js',
11        '/js/tether.min.js',
12        '/css/font-awesome.min.css'
13      ])
14    ).then(console.log(`Bootstrap Loaded: ${_.capitalize(start.toNow())}.`));
15  });
16</script>

Fetch Inject is 555 bytes compressed, non-blocking and included by default in Custom Layouts. Visit the CodePen Playground to try it out.