Delay The Loading Of Anything With Defer.js

Category: Javascript , Loading , Recommended | May 15, 2021
Author: shinsenter
Views Total: 157 views
Official Page: Go to website
Last Update: May 15, 2021
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, Images, Iframes, Video, Audios, and any DOM you can imagine.

How to use it:

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

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

2. 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. The second parameter is used to append a unique ID to the script.

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

// Or
<script type="deferjs" src="1.js"></script>

3. Defer the loading of CSS within the document.

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

4. Defer the loading of any DOM elements (like images, iframes, videos, audios, etc) within the document.

// Defer.dom(selector, delay, cssclass, validate, observeOptions)

// lazy load images with the CSS class of lazy
// and add the loaded to those images when they're finished loading
// place images in the data-src attribute
<img class="lazy" data-src="1.jpg" />
Defer.dom('img.lazy', 200, 'loaded');

// lazy load containers with the CSS class of container
Defer.dom('.container');
<div id="container" data-style="background: url(1.jpg)">
</div>

// lazy load iframes, pictures, videos, audios...
<iframe class="multi-lazy" title="Youtube"
  width="400" height="300" allowfullscreen
  allow="accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture"
  data-style="background: url(https://img.youtube.com/vi/Uz970DggW7E/hqdefault.jpg) 50% 50% / cover no-repeat;"
  data-src="https://www.youtube.com/embed/Uz970DggW7E">
</iframe>
<picture class="multi-lazy">
  <source media="(min-width:800px)" data-srcset="large.jpg">
  <source media="(min-width:600px)" data-srcset="medium.jpg">
  <img data-src="small.jpg" alt="Photo" style="width:auto;">
</picture>
<audio class="multi-lazy" controls>
  <source data-src="1.ogg" type="audio/ogg">
  <source data-src="1.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
<video class="multi-lazy" width="320" height="240" controls>
  <source data-src="m1.mp4" type="video/mp4">
  <source data-src="1.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Changelog:

v2.4.2 (05/15/2021)

  • Small updates

v2.4.1 (04/14/2021)

  • Reduce library size

v2.3.0 (04/04/2021)

  • Reduced library size

v2.2.0 (03/27/2021)

  • Update

v2.1.0 (03/09/2021)

  • Update

v2.0.0 (02/13/2021)

  • Bugs fixed.

v1.1.15 (02/10/2021)

  • Bugs fixed.

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