- ×Show All
Package @shinsenter/defer.js
๐ฅ A JavaScript micro-library that helps you lazy load (almost) anything. Defer.js is zero-dependency, super-efficient, and Web Vitals friendly.
Introduction
Lagging Big CSS files, slow JavaScript, or bulky media resources can cause issues with your website's Web Vitals, leading to a slow and frustrating user experience. But what if you could fully defer these resources and improve your website's load speed?
By using Defer.js, you can say goodbye to these issues! With its lazy loading capabilities, dependency-free design, lightning-fast performance, and hard-won experience, Defer.js is the perfect solution for optimizing your website's Web Vitals. Whether you're using a modern or legacy browser, Defer.js makes it easy to enhance your website's user experience with lightning-fast loading times.
- Package: @shinsenter/defer.js
- Version: 3.6.0
- Author: Mai Nhut Tan shin@shin.company
- Copyright: 2019-2023 SHIN Company https://code.shin.company/
- License: MIT
Document in other languages
[NEED HELP] Let's make the documentation and examples better together!
ๆฅๆฌ่ช
ๆฅๆฌไบบใฎใฏใใกใใฎ่จไบใๅ่ใซใใฆใใใ ใใใฐๅนธใใงใใ
- ใขใฟใซใใใฎDefer.js ใใญใฅใกใณใ ๏ผๆฅๆฌ่ช่จณ๏ผ
- ใใใใใใฎ่จไบ
- ใชใขในใญใใใฎ่จไบ
Credits
I would like to express warm thanks to @Ataruchi, @HeavyPeat and Limosuki for their articles in Japanese.
Why Choose Defer.js
- ๐งฉ Lazy load almost anything with ease
- ๐ Lightweight and fast, with no dependencies
- ๐ค Effortlessly integrates with your favorite frameworks
- ๐ฐ Easy to use, even for beginners
- โก๏ธ Super tiny (minzipped size is around 1KB)
- ๐ฆพ Optimized for the latest Web Vitals standards
- ๐ฑ Optimized for use on smartphones
- โ Supports legacy browsers like Internet Explorer 9
*Legacy browsers like Internet Explorer 9 require
IntersectionObserver
polyfill.Browser Support
Defer.js is compatible with all modern browsers, including:
- ๐ฅ IE9+ / Edge
- ๐ฅ Firefox 4+
- ๐ฅ Safari 3+
- ๐ฅ Chrome
- ๐ฅ Opera
- ๐ฑ Android 4+
- ๐ฑ iOS 3.2+
Known issues
- Discussion #122:
In iOS Safari, the first
click
event may not work when usingDefer.all()
with thewaitForUserAction
argument set totrue
and one of deferred scripts make a DOM change.
Getting started
Defer.js is an easy-to-use library that will help boost your website's performance by reducing loading times. Here's how to get started:
Basic
Add the Defer.js library to your page by including a
<script>
tag just below the opening<head>
tag.<head> <meta charset="UTF-8" /> <title>My Awesome Page</title> <!-- Add Defer.js here --> <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.6.0/dist/defer.min.js"></script> <!-- ... --> </head>
Inlining the library
To save an HTTP request, you can even inline the entire Defer.js library by copying its content from the defer.min.js and replacing the comments in the script tag with its content.
<head> <meta charset="UTF-8" /> <title>My Awesome Page</title> <!-- Add the Inlined Defer.js here --> <script>/* Defer.js content goes here */</script> <!-- ... --> </head>
Compatibility with older versions
If you're using an older version of Defer.js, you can use
defer_plus.min.js
instead ofdefer.min.js
.<head> <meta charset="UTF-8" /> <title>My Awesome Page</title> <!-- Put defer_plus.min.js here --> <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.6.0/dist/defer_plus.min.js"></script> <!-- ... --> </head>
For OLD browsers (such as IE9)
To enhance performance for legacy browsers that don't support the
IntersectionObserver
feature, you can load the IntersectionObserver polyfill library after thedefer.min.js
script tag.<script>/* Defer.js content */</script> <!-- Add the IntersectionObserver Polyfill for legacy browsers --> <script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.6.0/dist/polyfill.min.js"><\/script>');</script>
NOTE: Modern browsers support the
IntersectionObserver
feature, so you don't have to worry about adding the polyfill if you don't have legacy browsers in mind.
Functions
- Defer(func, [delay], [waitForUserAction]) โ
void
- .lazy :
boolean
- .all([selector], [delay], [waitForUserAction]) โ
void
- .dom([selector], [delay], [unveiledClass], [resolver], [observeOptions]) โ
void
- .css(fileUrl, [id], [delay], [onload], [waitForUserAction]) โ
void
- .js(fileUrl, [id], [delay], [onload], [waitForUserAction]) โ
void
- .reveal(node, [unveiledClass]) โ
void
- .lazy :
defer(func, [delay])deferimg([selector], [delay], [unveiledClass], [resolver], [observeOptions])deferiframe([selector], [delay], [unveiledClass], [resolver], [observeOptions])deferstyle(src, [id], [delay], [onload])deferscript(src, [id], [delay], [onload])
Typedefs
Defer(func, [delay], [waitForUserAction]) โ
void
Heavy DOM manipulations may cause render-blocking issues in real scenarios. Wrapping your script with
Defer()
may help your website prevent render-blocking issues.Kind: global function
Since: 2.0Param Type Default Description func function
A function to be executed after page fully loaded. [delay] number
0
The time, in milliseconds that it should wait before the function is executed. [waitForUserAction] boolean
false
This argument tells Defer()
to delay the execution and wait until there is a user interaction.Example
jQuery is used in this example to perform some DOM manipulations. This will attach<pre><code></code></pre>
blocks to the document as soon as the page finished loading.<script> function generate_code_blocks () { $('.demo').each(function() { var code = $('<pre><code class="language-html"></code></pre>'); var demo = $(this); var html = demo.html().trim().replace(/ {4}/g, ' '); code.children().text(html); demo.append(code); }); } Defer(generate_code_blocks, 0); </script>
Example
Sometimes, you would like your code not to run unless there is user activity.The third argument tells
Defer()
to delay the execution of the function and wait until the user starts interacting with your page.<style> body.moving { background: linear-gradient(270deg, #ffffff, #e8f0c3, #ccf0c3); background-size: 600% 600%; animation: moving_bg 30s ease infinite; } </style> <script> function make_background_animate() { // jQuery is used in this example to attach a class to the <body> tag. // You won't see the animated background until you start interacting. $('body').addClass('moving'); } Defer(make_background_animate, 0, true); </script>
- Defer(func, [delay], [waitForUserAction]) โ
void
- .lazy :
boolean
- .all([selector], [delay], [waitForUserAction]) โ
void
- .dom([selector], [delay], [unveiledClass], [resolver], [observeOptions]) โ
void
- .css(fileUrl, [id], [delay], [onload], [waitForUserAction]) โ
void
- .js(fileUrl, [id], [delay], [onload], [waitForUserAction]) โ
void
- .reveal(node, [unveiledClass]) โ
void
- .lazy :
Defer.lazy :
boolean
The
Defer.lazy
variable was added since v3.0.Setting
Defer.lazy=true
tells the library to delay the execution of deferred scripts until the user starts interacting with the page regardless of the page load event.It will override the default behavior of
waitForUserAction
argument of theDefer()
method.Changing this variable will also affect the behavior of these functions:
Kind: static property of
Defer
Default:(not set)
Access: public
Since: 3.0
Example
To override the default behavior of theDefer()
method.<!-- You can put this right below the script tag containing defer.min.js --> <script>Defer.lazy = true;</script>
Defer.all([selector], [delay], [waitForUserAction]) โ
void
Slow scripts (third-party libraries, add-ons, widgets, etc.) may cause Web Vitals issues in real scenarios.
Fully deferring
<script>
tags may help your page prevent Web Vitals issues.You can fully defer any script tag by setting its
type
attribute todeferjs
. This trick also works perfectly with<script>
tags with ansrc
attribute.Kind: static method of
Defer
Note: (1) To avoid unexpected behavior when using theDefer.all()
method to delay the execution of script tags, you should call run theDefer.all()
method with a regular script tag.
Note: (2) Lazy loading behavior changed since v3.0 when you setDefer.lazy=true
orwaitForUserAction=true
. A<script>
tags withtype="deferjs"
will not execute unless the user starts interacting with your page.
Note: (3) Resource hints feature was added since v3.2 as it is recommended to prevent issues called "Taming the Waterfall". This feature is discussed at #112.
Note: (4) Known Issue: In iOS Safari, the firstclick
event may not work when usingDefer.all()
withwaitForUserAction
set totrue
and one of deferred scripts make a DOM change. View the discussion #122 for more details.
Since: 2.0Param Type Default Description [selector] string
"[type=deferjs]"
A CSS selector selects target script tags that will be Lazy loaded. [delay] number
0
The time, in milliseconds that it should wait before a script tag is executed. [waitForUserAction] boolean
false
This argument tells the Defer.all()
method to delay the execution of scripts until there is a user interaction.Example
Using magictype="deferjs"
attribute:Before:
<script type="text/javascript"> // your JavaScript is here console.log('This script is a normal script tag.'); </script>
After:
<script type="deferjs"> // your JavaScript will still be here, // but it will not run unless the user starts interacting with your page. console.info('This script is lazy loaded with type="deferjs" attribute.'); </script>
Example
Using your value for the type attribute, such astype="my-magic"
:If you hate using the
type="deferjs"
attribute, you can even choose yours by using theDefer.all()
method.Notice: To avoid unexpected behavior when using the
Defer.all()
method to delay the execution of script tags, you should call run theDefer.all()
method with a regular script tag.<script type="my-magic"> // your JavaScript will still be here, // but it will not run unless the user starts interacting with your page. console.log( 'This script is lazy loaded with type="my-magic" attribute ' + '5 seconds after the user started interacting with your page.' ); </script> <!-- Place the below line after all other script tags --> <!-- The 2nd argument means those script tags will be delayed 5000ms --> <script> Defer.all('script[type="my-magic"]', 5000); </script>
Example
Using theDefer.all()
method for script tags withsrc
attribute:Your scripts will work perfectly when you mix inline scripts and script tags with an src attribute, like the below example.
The
waitForUserAction
argument (the fifth argument) is set totrue
, the library will defer the load of the tippy.js library until the user starts interacting, when the user moves his/her mouse on the button, a tooltip will show.Notice: To avoid unexpected behavior when using the
Defer.all()
method to delay the execution of script tags, you should call run theDefer.all()
method with a regular script tag.<button id="tooltip-button">My button</button> <script type="myscript" src="https://unpkg.com/@popperjs/core@2"></script> <script type="myscript" src="https://unpkg.com/tippy.js@6"></script> <script type="myscript"> tippy('#tooltip-button', { content: 'Hello from Defer.js!' }); </script> <script> Defer.all('script[type="myscript"]', 500, true); </script>
Defer.dom([selector], [delay], [unveiledClass], [resolver], [observeOptions]) โ
void
The
Defer.dom()
method is useful in the below use cases:- Lazy loading images, media, iframe tags, etc. on your website.
- Prevent downloading third-party libraries or add-ons unless they are needed.
- Scroll-reveal features, such as handling AJAX updating when a block is entering the viewport.
- An element that was deferred by Defer.dom() will be unveiled as soon as the page finished loading.
An element that was deferred by the
Defer.dom()
method will be unveiled when it going to enters the browser viewport.The
Defer.dom()
method also convertsdata-*
attributes of the elements into non-data attributes (e.g. fromdata-src
tosrc
).Please check out the below examples for more details.
Kind: static method of
Defer
Since: 2.0Param Type Default Description [selector] string
"[data-src]"
A CSS selector selects target HTML elements that will be unveiled later. [delay] number
0
The time, in milliseconds that it should wait before lazy loading is applied for target elements. [unveiledClass] string
Class names that will be added to target elements when they are unveiled. [resolver] NodeHandler
A NodeHandler will check a Node to determine if it will be unveiled or not. If the resolver()
callback returnsfalse
, the node will not be unveiled.[observeOptions] object
Intersection observer options Example
Using thedata-src
attribute to lazy load image tags.The browser uses the
src
attribute of<img>
tags to trigger the image load. It doesn't matter if it is the first or the 1,000th image in your HTML.If the browser gets the
src
attribute, it will trigger the image to be downloaded, regardless of whether it is in or out of the current view.To defer the load, put the image URL in an attribute other than
src
. We specify the image URL in thedata-src
attribute of the image tag. Sometimes, thesrc
attribute could be used to download a very small placeholder image before the real image gets downloaded.<div id="demo-basic"> <img alt="A lazy image" width="200" height="300" loading="lazy" data-src="https://picsum.photos/id/1003/200/300"> <img alt="A lazy image with a low-resolution placeholder" width="200" height="300" loading="lazy" src="https://picsum.photos/id/1002/20/30?blur" data-src="https://picsum.photos/id/1002/200/300"> </div> <script> Defer.dom('#demo-basic img'); </script>
Example
Lazy load a responsive image withdata-srcset
anddata-sizes
attributes.Using the
srcset
attribute has made responsive image sizing much simpler. It allows you to define a list of differently-sized versions of the same image, and provide information about the size of each one. Then, the client (browser) gets to make the decision.We can also use the same trick as the above examples. We specify an image URL set in
data-srcset
anddata-sizes
attributes of the image tag.<div id="demo-srcset"> <img alt="A lazy image with srcset attribute" width="200" height="300" loading="lazy" data-sizes="200w" src="https://picsum.photos/id/204/20/30?blur" data-src="https://picsum.photos/id/204/200/300" data-srcset="https://picsum.photos/id/204/400/600 2x, https://picsum.photos/id/204/600/900 3x"> </div> <script> Defer.dom('#demo-srcset img'); </script>
Example
Lazy load a responsive image with flexible format selection.Different browsers support different image formats. We might want to send a fancy new image format such as WebP to browsers that can render it, and fall back to trusty old JPEGs in browsers that donโt.
We can also use the same trick as the above examples for picture tags, and their children's HTML nodes.
<div id="demo-picture"> <picture> <source type="image/webp" data-sizes="200w" data-src="https://picsum.photos/id/1054/200/300.webp" data-srcset="https://picsum.photos/id/1054/400/600.webp 2x, https://picsum.photos/id/1054/600/900.webp 3x"> <img alt="A lazy image with srcset attribute" width="200" height="300" loading="lazy" data-sizes="200w" src="https://picsum.photos/id/1054/20/30?blur" data-src="https://picsum.photos/id/1054/200/300" data-srcset="https://picsum.photos/id/1054/400/600 2x, https://picsum.photos/id/1054/600/900 3x"> </picture> </div> <script> Defer.dom('#demo-picture picture'); </script>
Example
Basic usage with adding CSS class.The
Defer.dom()
method also allows you to add CSS class names when an element is unveiled. In this example, we will add some CSS class names to make an<img>
tag animate.<div id="demo-basic2"> <img alt="A lazy image with animation when loaded" width="200" height="300" loading="lazy" src="https://picsum.photos/id/1024/20/30?blur" data-src="https://picsum.photos/id/1024/200/300"> </div> <script> // this example is using animate.css library // see: https://animate.style Defer.dom('#demo-basic2 img', 0, 'animate__animated animate__backInLeft'); </script>
Example
Lazy load inline CSS background images.We can also defer background images for any HTML tag other than
<img>
or<picture>
.<style> #demo-inline .image { display: inline-block; height: 300px; width: 200px; background: transparent 0 0 / cover no-repeat; border-radius: 150px; } </style> <div id="demo-inline"> <div class="image" data-style="background-image:url(https://picsum.photos/id/1068/400/600)"></div> <div class="image" data-style="background-image:url(https://picsum.photos/id/1069/400/600)"></div> <div class="image" data-style="background-image:url(https://picsum.photos/id/1070/400/600)"></div> </div> <script> Defer.dom('#demo-inline .image'); </script>
Example
Lazy load CSS background images.Just another example of lazy loading background images for HTML tags, but we can also use CSS class names instead of inline
style
attributes.<style> #demo-css .image { display: inline-block; height: 300px; width: 200px; background: transparent 0 0 / cover no-repeat; border-radius: 150px; } #pic1.shown { background-image: url(https://picsum.photos/id/106/400/600); } #pic2.shown { background-image: url(https://picsum.photos/id/206/400/600); } #pic3.shown { background-image: url(https://picsum.photos/id/306/400/600); } </style> <div id="demo-css"> <div id="pic1" class="image"></div> <div id="pic2" class="image"></div> <div id="pic3" class="image"></div> </div> <script> Defer.dom('#demo-css .image', 0, 'shown'); </script>
Example
Lazy load a video.With the
Defer.dom()
method, we can easily defer the load of various media tags, such as a<video>
tag.<div id="demo-video"> <video autoplay="true" controls="true" muted="true" width="480" height="270" data-poster="https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerFun.jpg"> <source type="video/mp4" data-src="https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4"> <!-- <source type="video/ogg" data-src="https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.ogg"> --> <!-- <source type="video/avi" data-src="https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.avi"> --> </video> </div> <script> Defer.dom('#demo-video video', 0, 'shown'); </script>
Example
Lazy load an iframe.With the
Defer.dom()
method, we can effortlessly defer the load of iframe tags.<div id="demo-iframe"> <iframe title="An iframe example" width="480" height="270" frameborder="0" src="about:blank" data-src="https://shinsenter.github.io/defer.js/"> </iframe> </div> <script> Defer.dom('#demo-iframe iframe', 0, 'iframe-loaded'); </script>
Example
Lazy load a Youtube video.This example uses the
Defer.dom()
method to defer a load of a Youtube iframe.<div id="demo-youtube"> <iframe title="The new MacBook Air" width="480" height="270" frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" src="about:blank" data-src="https://www.youtube.com/embed/jwmS1gc9S5A" data-style="background: transparent url(https://img.youtube.com/vi/jwmS1gc9S5A/hqdefault.jpg) 50% 50% / cover no-repeat;"> </iframe> </div> <script> Defer.dom('#demo-youtube iframe', 0, 'youtube-loaded'); </script>
Example
Lazy load a Facebook post.This example uses the
Defer.dom()
method to defer a load of a Facebook post.<div id="demo-facebook"> <iframe title="An example of Facebook post" width="480" height="270" frameborder="0" scrolling="no" allowtransparency="true" allow="encrypted-media" src="about:blank" data-src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fappseeds%2Fposts%2F1502937099839267&width=480&show_text=true&height=200"> </iframe> </div> <script> Defer.dom('#demo-facebook iframe', 0, 'facebook-loaded'); </script>
Example
Lazy load a Discord chat box.This example uses the
Defer.dom()
method to defer a load of a Discord chat box.<iframe id="discord-widget" title="Discord" width="480" height="270" frameborder="0" allowtransparency="true" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts" src="about:blank" data-src="https://discord.com/widget?id=962919929307357234&theme=dark"> </iframe> <script> Defer.dom('#discord-widget', 0, 'discord-loaded'); </script>
Example
Scroll and reveal.The
Defer.dom()
method also helps you do an action when an element is unveiled.In this example, when the user scrolls to the bottom of the page, he/she will see a message as soon as an element with
id="surprise-me"
appears.<script> Defer.dom('#surprise-me', 1000, 'seen', function(node) { alert('Yay!\nYou have seen all examples. Have fun with Defer.js!'); }); </script>
Defer.css(fileUrl, [id], [delay], [onload], [waitForUserAction]) โ
void
We use the
Defer.css()
method to defer a load of external CSS files without blocking the page rendering.Kind: static method of
Defer
Note: Lazy loading behavior changed since v3.0 when you setDefer.lazy=true
orwaitForUserAction=true
. ThefileUrl
will not be fetched unless the user starts interacting with your page.
Since: 2.0Param Type Default Description fileUrl string
URL to the CSS file that should be lazy loaded. [id] string
The ID will be assigned to the script tag to avoid downloading the same file multiple times. [delay] number
0
The time, in milliseconds that the page should wait before the CSS file is fetched. [onload] function
The callback function will be executed if the CSS file is successfully loaded. [waitForUserAction] boolean
false
This argument tells the Defer.css()
method to delay downloading the CSS file until there is a user interaction.Example
Using theDefer.css()
method to lazy load FontAwesome (CSS and some font files).<style> #demo-fontawesome .far { font-size: 3em; color: green; } </style> <div id="demo-fontawesome"> <i class="far fa-thumbs-up"></i> <code>@shinsenter/defer.js</code> </div> <script> var fileUrl = 'https://pro.fontawesome.com/releases/v5.14.0/css/all.css'; Defer.css(fileUrl, 'fa5-css', 0, function() { console.info('FontAwesome is loaded.'); // debug }); </script>
Example
Lazy load animate.css library.In this example, we want the download of the Animate.css library to wait for the first user interaction with your page so the
waitForUserAction
argument (the fifth argument) is set totrue
.When the Animate.css library was downloaded, we will add CSS classes from Animate.css to every tag with
class=".demo"
on the page. No tag will be animated unless the user scrolls to its position.<script> var origin = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1'; // This script will lazy load animate.css library. Defer.css(origin + '/animate.min.css', 'animate-css', 0, function () { console.info('Animate.css is loaded.'); // debug // adds animation classes to demo blocks. Defer.dom('.demo', 100, 'animate__animated animate__fadeIn'); }, true); </script>
Defer.js(fileUrl, [id], [delay], [onload], [waitForUserAction]) โ
void
We use the
Defer.js()
method to defer a load of 3rd-party JavaScript libraries, widgets, add-ons, etc. without blocking the page rendering.Kind: static method of
Defer
Note: (1) Because the download of a file using theDefer.js()
method is asynchronous, to avoid dependency error when lazy loading a third-party library using theDefer.js()
method, it is highly recommended that theonload
callback function be used to make sure that the library you needed is completely defined.
Note: (2) Lazy loading behavior changed since v3.0 when you setDefer.lazy=true
orwaitForUserAction=true
. ThefileUrl
will not be fetched unless the user starts interacting with your page.
Since: 2.0Param Type Default Description fileUrl string
URL to the js file that should be lazy loaded. [id] string
The ID will be assigned to the script tag to avoid downloading the same file multiple times. [delay] number
0
The time, in milliseconds that the page should wait before the JS file is fetched. [onload] function
The callback function will be executed if the js file is successfully loaded. [waitForUserAction] boolean
false
This argument tells the Defer.js()
method to delay downloading the JS file until there is a user interaction.Example
An alternative way to lazy load Google Tag Manager script.Using the
Defer.js()
method to lazy load Google Tag Manager library and its external scripts.In this example, we want the GTM to execute as soon as the page is loaded so the
waitForUserAction
argument (the fifth argument) is set tofalse
.<script> var GTM_ID = 'UA-XXXXXXX-Y'; window.dataLayer = window.dataLayer || []; dataLayer.push(['js', new Date()]); dataLayer.push(['config', GTM_ID]); Defer.js('https://www.googletagmanager.com/gtag/js?id=' + GTM_ID, 'google-tag', 0, function() { console.info('Google Tag Manager is loaded.'); // debug }, false); </script>
Example
Lazy load AddThis add-on.Using the
Defer.js()
method to lazy load AddThis Share Buttons and its external resources. AddThis add-on will not be loaded until the user starts interacting with the page (thewaitForUserAction
argument (the fifth argument) is set totrue
).<div class="demo-addthis"></div> <script> var ADDTHIS_ID = 'ra-5c68e61cf456f1cb'; var fileUrl = 'https://s7.addthis.com/js/300/addthis_widget.js#pubid=' + ADDTHIS_ID; var loaded = false; Defer.js(fileUrl, 'addthis-js', 0, function() { console.info('AddThis add-on is loaded.'); // debug }, true); </script>
Example
Lazy load Prism.js library.Using Defer.js to lazy load Prism.js library and its assets. The
<code>
blocks on the page will be rendered only when the user scrolls to anycode
block position.<style> pre { background-color: honeydew; } </style> <script> // turns on manual mode window.Prism = window.Prism || {}; Prism.manual = true; // this script will lazy load Prism.js library and its dark theme. // when loading is done, it will apply code formatting to every <code> tag. var origin = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0'; Defer.css(origin + '/themes/prism-tomorrow.min.css', 'prism-css'); Defer.js(origin + '/prism.min.js', 'prism-js', 0, function () { // enables code highlighting for code tags using Defer.dom() Defer.dom('pre code', 100, 'ide-loaded', Prism.highlightElement, {rootMargin: "120%"}); console.info('Prism.js is loaded.'); // debug }); </script>
Example
Lazy load a Twitter post or timeline.This example uses the
Defer.js()
and theDefer.dom()
method to defer a Twitter post or a timeline. The.lazy-timeline
or.lazy-tweet
blocks on the page will be rendered only when the user scrolls to the target position.<div id="demo-twitter"> <a class="lazy-timeline" <!-- the original is class="twitter-timeline" --> href="https://twitter.com/TwitterDev" data-chrome="nofooter noborders" data-height="400" data-dnt="true" data-theme="dark"> Tweets by @TwitterDev </a> <blockquote class="lazy-tweet" <!-- the original is class="twitter-tweet" -->> <!-- content is truncated --> </blockquote> </div> <script> Defer.js('https://platform.twitter.com/widgets.js', 'twitter-sdk', 0, function() { Defer.dom('.lazy-timeline', 0, 'twitter-loaded', function(node) { // adds the correct class name for tweet element node.className = 'twitter-timeline'; // For better performance, // we only search within the parent DOM tree for uninitialized widgets twttr.widgets.load(node.parentNode); console.info('Twitter timeline is loaded.'); // debug }, {rootMargin: "200%"}); Defer.dom('.lazy-tweet', 0, 'twitter-loaded', function(node) { // adds the correct class name for timeline element node.className = 'twitter-tweet'; // For better performance, // we only search within the parent DOM tree for uninitialized widgets twttr.widgets.load(node.parentNode); console.info('Twitter post is loaded.'); // debug }, {rootMargin: "200%"}); }); </script>
Example
Lazy load an Instgram post.This example uses the
Defer.js()
and theDefer.dom()
method to defer an Instagram post. The.lazy-instagram
block on the page will be rendered only when the user scrolls to the target position.<div id="demo-instagram"> <blockquote class="lazy-instagram" <!-- the original is class="instagram-media" --> data-instgrm-captioned="" data-instgrm-permalink="<!-- the URL is omitted -->"> <!-- content is truncated --> </blockquote> </div> <script> Defer.js('https://www.instagram.com/embed.js', 'instagram-sdk', 0, function() { Defer.dom('.lazy-instagram', 0, 'instagram-loaded', function(node) { // adds the correct class name for instagram post node.className = 'instagram-media'; // For better performance, // we only search within the parent DOM tree for uninitialized widgets instgrm.Embeds.process(node.parentNode); console.info('Instagram post is loaded.'); // debug }, {rootMargin: "200%"}); }); </script>
Defer.reveal(node, [unveiledClass]) โ
void
Programmatically reveal a Node that was lazy loaded by the library.
Kind: static method of
Defer
Since: 2.1Param Type Description node Node
An HTML node that will be unveiled [unveiledClass] string
Class names that will be added to the node when it is unveiled. Example
// 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); }); // a short-hand for the above code document.querySelectorAll('.multi-lazy').forEach(Defer.reveal); // adds 'unveiled' classname when an element unveiled document.querySelectorAll('.multi-lazy') .forEach(function(node) { Defer.reveal(node, 'unveiled'); });
defer(func, [delay])Deprecated
Deprecated from version 2.0
Kind: global function
See: Defer
Since: 1.0Param Type Default func function
[delay] number
0
deferimg([selector], [delay], [unveiledClass], [resolver], [observeOptions])Deprecated
Deprecated from version 2.0
Kind: global function
See: dom
Since: 1.0Param Type Default [selector] string
"[data-src]"
[delay] number
0
[unveiledClass] string
[resolver] NodeHandler
[observeOptions] object
deferiframe([selector], [delay], [unveiledClass], [resolver], [observeOptions])Deprecated
Deprecated from version 2.0
Kind: global function
See: dom
Since: 1.0Param Type Default [selector] string
"[data-src]"
[delay] number
0
[unveiledClass] string
[resolver] NodeHandler
[observeOptions] object
deferstyle(src, [id], [delay], [onload])Deprecated
Deprecated from version 2.0
Kind: global function
See: css
Since: 1.0Param Type Default src string
[id] string
[delay] number
0
[onload] function
deferscript(src, [id], [delay], [onload])Deprecated
Deprecated from version 2.0
Kind: global function
See: js
Since: 1.0Param Type Default src string
[id] string
[delay] number
0
[onload] function
Node
An abstract base class upon which many other DOM API objects are based
Kind: global typedef
See: https://developer.mozilla.org/docs/Web/API/Node
Function
A code snippet that can be called, or a variable that refers to the function.
Kind: global typedef
See: https://developer.mozilla.org/docs/Glossary/Function
NodeHandler โ
Function
A Function receives a DOM Node object as its argument.
Kind: global typedef
Extends:Function
Param Type Description node Node
A Node object
Community
Join our vibrant community of open-source contributors and make your mark on the project! We welcome all forms of contributions and support.
We use the standard GitHub pull request process and our reviewers will be happy to help you get started.
Don't feel confident contributing code? No problem! Improving the documentation, reporting issues, and starting discussions are all valuable contributions that we appreciate.
[NEED HELP] Let's make the documentation and examples better together!
Support the Project
Love the project? Show your support by becoming a stargazer on GitHub, joining our Gitter community, or sponsoring the project.
Consider buying the developer a coffee or becoming a sponsor to help fund future development.
Your support is greatly appreciated.
From Vietnam ๐ป๐ณ with love.