🥇 A lightweight JavaScript library that helps you lazy load (almost) anything. Defer.js is dependency-free, highly efficient, and optimized for Web Vitals.
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:
With this release, you can now add more attributes to the tags generated by the
Defer.cssorDefer.jsmethods.For example:
This will load the animate.css library lazily.
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: