DEFR

A simple usage pattern and lightweight JavaScript library for deferred loading of external CSS and JavaScript resources with optional support for localStorage caching.

Simple asset loading in modern browsers (modern-simple)

This page features two separate bundles of assets (CSS and JavaScript files; one in the <head> section, one near the closing <body> element) that are not loaded / applied until you click the following button (JavaScript must be enabled!) or activate autoloading of the deferred assets (see below). You should watch the network tab of your developer tools. In Chrome the blue line roughly indicates the moment when this page is rendered to your screen (DOMContentLoaded event).

You will see the results here:

  1. This option will become active when the first CSS file has been loaded and applied (first asset bundle).
  2. This option will become active when the second CSS file has been loaded and applied (first asset bundle).
  3. This option will become active when the first JavaScript file has been loaded and applied (first asset bundle). Also, it features an onload attribute, which should print a happy "Loaded first script" to your console as soon as it is activated.
  4. This option will become active when the second JavaScript file has been loaded and applied (second asset bundle). It contains instructions to print "Loaded second script" to your console as soon as it is activated.

and reload the page while watching your network tab. You should see that the four assets are loaded after the DOMContentLoaded event (as opposed to the defr.modern-simple.min.js library itself). This is the effect of deferred loading.

All examples