Author: | shinsenter |
---|---|
Views Total: | 195 views |
Official Page: | Go to website |
Last Update: | March 22, 2023 |
License: | MIT |
Preview:

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, waitForInteraction) Defer.js('target.js', 'target-id', 2000, function() { // do something }, true); // Or <script type="deferjs" src="1.js"></script>
3. Defer the loading of CSS within the document.
// Defer.css(src, id, delay, callback, waitForInteraction) Defer.css('target.css', 'target-id', 2000, true);
4. Defer the loading of any DOM elements (like images, iframes, videos, audios, etc) within the document.
// Defer.dom(selector, delay, cssclass, resolver, 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>
5. reveal a Node that was lazy loaded by the library.
// Defer.reveal(node, cssClass) // reveals a single element var node = document.getElementById('my-video'); Defer.reveal(node); // reveals multiple elements document.querySelectorAll('.multi-lazy') .forEach(function(node) { Defer.reveal(node); });
Changelog:
v3.6.0 (03/22/2023)
- Bugfix
v3.5.0 (02/21/2023)
- improving documentation and reducing the library file size after minification.
v3.4.0 (09/07/2022)
- Update
v3.3.0 (09/05/2022)
- Update
v3.2.0 (09/01/2022)
- Added preload hints feature since v3.2.0 to prevent issues
v3.0.0 (08/12/2022)
- New Defer.lazy variable and waitForInteraction argument were added since v3.0.
v2.6.0 (04/26/2022)
- Save more bytes
v2.5.0 (07/18/2021)
- Bug fixes
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