Delay The Loading Of Anything With Defer.js

Category: Javascript , Loading , Recommended | March 12, 2019
Author: shinsenter
Views Total: 169
Official Page: Go to website
Last Update: March 12, 2019
License: MIT

Preview:

Delay The Loading Of Anything With Defer.js

Description:

Defer.js is a small and lightweight JavaScript library that delays the loading of web resources to improve page speed.

Supports JavaScript, CSS, Image, Iframe and much more.

How to use it:

Load the minified version of the defer.js library in the document.

<script src="defer.min.js"></script>

Defer the loading of JavaScript within the document. In this example, the target script will wait for 3 seconds to load after the page is fully loaded.

// deferscript(src, id, delay, callback)
deferscript('target.js', 'target-id', 2000, function() {
  // do something
});

Defer the loading of CSS within the document.

// deferstyle(src, id, delay)
deferstyle('target.css', 'target-id', 2000);

Lazy load images within the document.

<img class="demo"
     data-src="target.jpg">
deferimg('demo', 100, 'loaded', function(img) {
  img.onload = function() {
    img.classList.add('show');
  }
});

Lazy load iframes within the document. Ideal for Youtube & Vimeo videos.

<iframe class="video"
        data-src="https://www.youtube.com/embed/VIDEO-ID"
>
</iframe>
deferiframe('video', 100, 'loaded', function(frame) {
  frame.onload = function() {
    frame.classList.add('show');
  }
});

Changelog:

v1.0.11 (03/12/2019)

  • Removed context from defer() function (please use func.bind(context))
  • Set 80ms (equals to 5 browser tick cycles) as default delay time
  • Added jQuery-like alias $ for defer(), useful when jQuery has not been loaded
  • Code refactoring, removed unused codes
  • Improved polyfill for IE 9~11

v1.0.9 (03/01/2019)

  • Fix “Object doesn’t support property or method ‘forEach'” for IE

You Might Be Interested In:


Leave a Reply