1.0.8

Added: API method dependencies for dependency callback. Requires the API and dependencies modules.

// CSS loader
$async.dependencies(['dep1','dep2'], function() {
 // dependencies ready
});

// Javascript loader
$async.js.dependencies('jquery', function() {
 // jQuery dependency ready
});

1.0.7

• Upgrade to $lazy 1.1.0

1.0.6

• Bugfix: domReady timing method not working correctly when used after document is ready. @ArekZw #1

1.0.5

• bugfix: localStorage not working in old browsers (cssText on <style> element needs to be set after DOM insert).

1.0.4

• Added $lazy timing module as an alternative for inview. $lazy is based on Intersection Observer and much smaller in size.

{
   "load_timing": {
      "type": "lazy",
      "config": ["config to pass to $lazy(), see docs.style.tools/lazy"],
      "ref": "optional-dependency-to-wait-for"
   }
}

Using the time API:

$async.time({"type":"lazy", "config": "#selector"}, function() {
   // element in view
});

// alternative for:
$lazy("#selector", function() { /* + in-view check */ });

When ref is defined, $lazy based timings will be setup once the dependency is resolved. It enables to time the setup of $lazy as soon as the script is loaded.

Example /lazy.js with auto-loading of polyfill

[
   {
      "src": "/lazy.js",
      "ref": "$lazy",
      "load_timing": "domReady"
   },
   {
      "src": "/lazy-polyfill.js",
      "load_timing": {
         "type": "method",
         "method": "$lazypoly"
      }
   },
   {
      "src": "/footer-scripts.js",
      "load_timing": "domReady",
      "exec_timing": {
         "type": "lazy",
         "config": ["#footer",0,"100px"],
         "ref": "$lazy"
      }
   },
]

When ref is omitted, $lazy will be loaded on domReady without verifying if the $lazy script is available.

1.0.3

• Bugfix: inline_js + api + timing module not working after $async.time update.
• method timing improved.

1.0.2

• Improved: method timing now returns .then ready callback when using API module: custom_load_script().then(/*...*/)
• Added $async.time method.

$async.time enables to make use of the timing module for any purpose, for example for script startup-time optimization or to execute a script when an element scrolls into view or matches a Media Query.

$async.time requires both the API and timing module.

$async.time(
  {
     "type": "requestIdleCallback",
     "timeout": 3000
  },
  function() {
    // big script
  },
  ["big-script"]
);

With JSON compression it would result in the following:

$async.time({"2":53,"57":3000},function(){});

When using debug sources, the browser console will provide Performance API details.

1.0.1

Added: method timing option (custom timing method).

Example

{
    "ref": "popup",
    "dependencies": "jquery",
    "load_timing": "domReady",
    "exec_timing": {
        "type": "method",
        "method": "exec_popup_script"
    }
}

The example exec_timing option will define window.exec_popup_script that will trigger the configured load or exec timing.

exec_popup_script(); // exec preloaded popup script

When using the API .then/.on module:

// preload popup script in background
$async.js({
    "ref": "popup",
    "dependencies": "jquery",
    "load_timing": "domReady",
    "exec_timing": {
        "type": "method",
        "method": "exec_popup_script"
    }
});

// just-in-time
jQuery('button.popup').on('click', function() {

    // load popup script
    exec_popup_script().then(function() {
      alert('popup script ready');
    });
});

First release

1.0.0

1.0.0