What's Changed

• Add a new feature was discussed in #131 by @shinsenter in #132

Full Changelog: 3.7.0...3.8.0

What's Changed

With this release, you can now add more attributes to the tags generated by the Defer.css or Defer.js methods.

For example:

This will load the animate.css library lazily.

<script>
  var origin = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1';

  Defer.css(origin + '/animate.min.css', {media: 'screen'}, 0, function () {
    console.info('Animate.css is loaded.'); // debug

    // adds animation classes to demo blocks.
    Defer.dom('.demo', 100, 'animate__animated animate__fadeIn');
  });
</script>

By adding {media: 'screen'}, the animate.css library will only load when the page is displayed on a screen-based device. The generated tag will look like:

<link media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">

This is a temporary fix for the issue in the discussion #122.

In iOS Safari, the first click event may not work when using Defer.all() with the waitForUserAction argument set to true and one of deferred scripts make a DOM change.

This version focuses on improving documentation and reducing the library file size after minification.
I would like to express warm thanks to @Ataruchi, @HeavyPeat and Limosuki for their articles in Japanese.

Added preload hints feature since v3.2.0 to prevent issues mentioned in the article Taming the Waterfall. This feature is as discussed in #112.

Update documents and examples.

Released defer.js v3.0.0

All examples and demo have been re-created.

New Defer.lazy variable and waitForInteraction argument were added since v3.0.

Setting Defer.lazy=true or waitForInteraction=true tells the library to delay the execution of deferred scripts until the user starts interacting with the page regardless of the page load event.

Changing the Defer.lazy variable will also affect the default behavior of these functions:

• Defer()
• Defer.all()
• Defer.css()
• Defer.js()