Delay The Loading Of Anything With Defer.js

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


Delay The Loading Of Anything With Defer.js


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"
deferimg('demo', 100, 'loaded', function(img) {
  img.onload = function() {

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

<iframe class="video"
deferiframe('video', 100, 'loaded', function(frame) {
  frame.onload = function() {


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