<h1 id="id-shinsenterdeferjs">@shinsenter/defer.js</h1>
<p>🥇 A lightweight JavaScript library that helps you lazy load (almost) anything. Defer.js is dependency-free, highly efficient, and optimized for Web Vitals.</p>
<p><a href="https://code.shin.company/defer.js/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@shinsenter/defer.js" alt="NPM"></a>
<a href="https://code.shin.company/defer.js/releases"><img src="https://img.shields.io/github/release-date/shinsenter/defer.js" alt="GitHub Release Date"></a>
<a href="https://code.shin.company/defer.js/releases"><img src="https://img.shields.io/github/package-json/v/shinsenter/defer.js" alt="GitHub package.json version"></a>
<a href="https://www.npmjs.com/package/@shinsenter/defer.js"><img src="https://img.shields.io/bundlephobia/minzip/@shinsenter/defer.js" alt="npm bundle size (scoped)"></a>
<a href="https://www.jsdelivr.com/package/npm/@shinsenter/defer.js"><img src="https://img.shields.io/jsdelivr/npm/hm/@shinsenter/defer.js" alt="jsDelivr hits (npm)"></a></p>
<blockquote>
<p>💡 <a href="#documentation-in-other-languages">View document in other languages</a></p>
</blockquote>
<h2 id="id-introduction">Introduction</h2>
<p>Sluggish Big CSS files, slow JavaScript, or bulky media resources can negatively impact your website&#39;s Web Vitals, leading to a slow and frustrating user experience. But what if you could seamlessly defer these resources and boost your website&#39;s load speed?</p>
<p>By utilizing Defer.js, you can bid farewell to these issues! With its lazy loading capabilities, dependency-free design, lightning-fast performance, and hard-won experience, Defer.js is the ultimate solution for optimizing your website&#39;s Web Vitals. Whether you&#39;re using a modern or legacy browser, Defer.js makes it a breeze to enhance your website&#39;s user experience with blazing-fast loading times.</p>
<h2 id="id-why-choose-deferjs">Why Choose Defer.js</h2>
<ul>
<li>🧩 Effortlessly lazy load almost anything</li>
<li>🔰 Easy to use, even for beginners</li>
<li>🚀 Lightweight and blazingly fast, with no dependencies</li>
<li>⚡️ Super tiny (minzipped size is around 1KB)</li>
<li>🤝 Seamlessly integrates with your favorite frameworks</li>
<li>🦾 Optimized for the latest Web Vitals standards</li>
<li>📱 Optimized for use on smartphones</li>
<li>✅ Supports legacy browsers like Internet Explorer 9 <sup><a href="#browser-support">(*)</a></sup></li>
</ul>
<h2 id="id-contributing">Contributing</h2>
<p><a href="https://www.npmjs.com/package/@shinsenter/defer.js"><img src="https://nodei.co/npm/@shinsenter/defer.js.png?downloads=true" alt="NPM"></a></p>
<ul>
<li><strong>Package</strong>: <a href="https://www.npmjs.com/package/@shinsenter/defer.js">@shinsenter/defer.js</a></li>
<li><strong>Version</strong>: 3.8.0</li>
<li><strong>Author</strong>: Mai Nhut Tan <a href="mailto:&#115;&#x68;&#105;&#x6e;&#64;&#x73;&#x68;&#105;&#x6e;&#x2e;&#99;&#x6f;&#109;&#112;&#x61;&#x6e;&#x79;">&#115;&#x68;&#105;&#x6e;&#64;&#x73;&#x68;&#105;&#x6e;&#x2e;&#99;&#x6f;&#109;&#112;&#x61;&#x6e;&#x79;</a></li>
<li><strong>Copyright</strong>: 2019-2024 SHIN Company <a href="https://code.shin.company/">https://code.shin.company/</a></li>
<li><strong>License</strong>: <a href="https://code.shin.company/defer.js/blob/master/LICENSE">MIT</a></li>
</ul>
<p>If you find the project useful, please give it a star or consider donating via <a href="https://www.paypal.me/shinsenter">PayPal</a>.
You can also <a href="https://github.com/shinsenter/defer.js/discussions/new/choose">open a discussion</a> on Github if you have any idea to improve the library.</p>
<p><a href="https://www.paypal.me/shinsenter"><img src="https://img.shields.io/badge/Donate-Paypal-blue" alt="Donate via PayPal"></a> <a href="https://code.shin.company/defer.js/stargazers"><img src="https://img.shields.io/badge/Become-Stargazer-yellow" alt="Become a Stargazer"></a> <a href="https://code.shin.company/defer.js/discussions/new/choose"><img src="https://img.shields.io/badge/New-Discussions-green" alt="Report an issue"></a></p>
<p>Your support helps maintain and improve these project for the community.</p>
<p>I appreciate you respecting my intellectual efforts in creating this library.
If you intend to copy or use ideas from this project, please give proper credit.</p>
<hr>
<h2 id="id-getting-started">Getting Started</h2>
<p>Defer.js is an easy-to-use library that will help boost your website&#39;s performance by reducing loading times. Here&#39;s how to get started:</p>
<h3 id="id-basic">Basic</h3>
<p>Add the Defer.js library to your page by including a <code>&lt;script&gt;</code> tag just below the opening <code>&lt;head&gt;</code> tag.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span> /&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>My Awesome Page<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>

  <span class="hljs-comment">&lt;!-- Add Defer.js here --&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.8.0/dist/defer.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

  <span class="hljs-comment">&lt;!-- ... --&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
</code></pre>
<h3 id="id-inlining-the-library">Inlining the Library</h3>
<p>To save an HTTP request, you can even inline the entire Defer.js library by copying its content from the <a href="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.8.0/dist/defer.min.js">defer.min.js</a> and replacing the comments in the script tag with its content.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span> /&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>My Awesome Page<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>

  <span class="hljs-comment">&lt;!-- Add the Inlined Defer.js here --&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"><span class="hljs-comment">/* Defer.js content goes here */</span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

  <span class="hljs-comment">&lt;!-- ... --&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
</code></pre>
<h3 id="id-compatibility-with-older-versions">Compatibility with Older Versions</h3>
<p>If you&#39;re using Defer.js v1.x, you can use <code>defer_plus.min.js</code> instead of <code>defer.min.js</code> without wondering about migrations.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span> /&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>My Awesome Page<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>

  <span class="hljs-comment">&lt;!-- Put defer_plus.min.js here --&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.8.0/dist/defer_plus.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

  <span class="hljs-comment">&lt;!-- ... --&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
</code></pre>
<h3 id="id-for-old-browsers-such-as-ie9">For OLD Browsers (such as IE9)</h3>
<p>To enhance performance for legacy browsers that don&#39;t support the <code>IntersectionObserver</code> feature, you can load the IntersectionObserver polyfill library after the <code>defer.min.js</code> script tag.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"><span class="hljs-comment">/* Defer.js content */</span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

<span class="hljs-comment">&lt;!-- Add the IntersectionObserver Polyfill for legacy browsers --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"><span class="hljs-string">&#x27;IntersectionObserver&#x27;</span><span class="hljs-keyword">in</span> <span class="hljs-variable language_">window</span>||<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">write</span>(<span class="hljs-string">&#x27;&lt;script src=&quot;https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.8.0/dist/polyfill.min.js&quot;&gt;&lt;\/script&gt;&#x27;</span>);</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><em>NOTE</em>: Modern browsers support the <code>IntersectionObserver</code> feature, so you don&#39;t have to worry about adding the polyfill if you don&#39;t have legacy browsers in mind.</p>
<hr>
<h2 id="id-functions">Functions</h2>
<ul>
<li><a href="#Defer">Defer(func, [delay], [waitForUserAction])</a> ⇒ <code>void</code><ul>
<li><a href="#Defer.lazy">.lazy</a> : <code>boolean</code> | <code>number</code></li>
<li><a href="#Defer.all">.all([selector], [delay], [waitForUserAction])</a> ⇒ <code>void</code></li>
<li><a href="#Defer.dom">.dom([selector], [delay], [unveiledClass], [resolver], [observeOptions])</a> ⇒ <code>void</code></li>
<li><a href="#Defer.css">.css(fileUrl, [id_or_attributes], [delay], [onload], [waitForUserAction])</a> ⇒ <code>void</code></li>
<li><a href="#Defer.js">.js(fileUrl, [id_or_attributes], [delay], [onload], [waitForUserAction])</a> ⇒ <code>void</code></li>
<li><a href="#Defer.reveal">.reveal(node, [unveiledClass])</a> ⇒ <code>void</code></li>
</ul>
</li>
<li><del><a href="#defer">defer(func, [delay])</a></del></li>
<li><del><a href="#deferimg">deferimg([selector], [delay], [unveiledClass], [resolver], [observeOptions])</a></del></li>
<li><del><a href="#deferiframe">deferiframe([selector], [delay], [unveiledClass], [resolver], [observeOptions])</a></del></li>
<li><del><a href="#deferstyle">deferstyle(src, [id], [delay], [onload])</a></del></li>
<li><del><a href="#deferscript">deferscript(src, [id], [delay], [onload])</a></del></li>
</ul>
<h2 id="id-typedefs">Typedefs</h2>
<ul>
<li><a href="#Node">Node</a></li>
<li><a href="#Function">Function</a></li>
<li><a href="#NodeHandler">NodeHandler</a> ⇐ <a href="#Function"><code>Function</code></a></li>
</ul>
<p><a name="Defer"></a></p>
<h2 id="id-deferfunc-delay-waitforuseraction-⇒-void">Defer(func, [delay], [waitForUserAction]) ⇒ <code>void</code></h2>
<p>Heavy DOM manipulations can cause render-blocking issues in real-world scenarios.
Wrapping your script with <code>Defer()</code> may help prevent render-blocking issues on your website.</p>
<p><strong>Kind</strong>: global function<br><strong>Since</strong>: 2.0  </p>
<div class="table-responsive"><table class="table table-striped"><tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>func</td>
<td><code>function</code></td>
<td></td>
<td>A function to be executed after the page is fully loaded.</td>
</tr>
<tr>
<td>[delay]</td>
<td><code>number</code></td>
<td><code>0</code></td>
<td>A timespan, in milliseconds, that the page should wait before executing the function.</td>
</tr>
<tr>
<td>[waitForUserAction]</td>
<td><code>boolean</code> | <code>number</code></td>
<td><code>false</code></td>
<td>This argument tells <code>Defer()</code> to delay execution and wait until there is a user interaction.</td>
</tr>
</table></div><p><strong>Example</strong><br>This example uses jQuery to perform some DOM manipulations.
It will attach <code>&lt;pre&gt;&lt;code&gt;&lt;/code&gt;&lt;/pre&gt;</code> blocks to the document
as soon as the page finishes loading.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-keyword">function</span> <span class="hljs-title function_">generate_code_blocks</span> (<span class="hljs-params"></span>) {
    $(<span class="hljs-string">&#x27;.demo&#x27;</span>).<span class="hljs-title function_">each</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {
      <span class="hljs-keyword">var</span> code = $(<span class="hljs-string">&#x27;&lt;pre&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;/code&gt;&lt;/pre&gt;&#x27;</span>);
      <span class="hljs-keyword">var</span> demo = $(<span class="hljs-variable language_">this</span>);
      <span class="hljs-keyword">var</span> html = demo.<span class="hljs-title function_">html</span>().<span class="hljs-title function_">trim</span>().<span class="hljs-title function_">replace</span>(<span class="hljs-regexp">/ {4}/g</span>, <span class="hljs-string">&#x27;  &#x27;</span>);

      code.<span class="hljs-title function_">children</span>().<span class="hljs-title function_">text</span>(html);
      demo.<span class="hljs-title function_">append</span>(code);
    });
  }

  <span class="hljs-title class_">Defer</span>(generate_code_blocks, <span class="hljs-number">0</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><strong>Example</strong><br>Sometimes, you may want your code to run only when there is user activity.</p>
<p>The third argument tells <code>Defer()</code> to delay executing the function
and wait until the user starts interacting with your page.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css">
  <span class="hljs-selector-tag">body</span><span class="hljs-selector-class">.moving</span> {
    <span class="hljs-attribute">background</span>: <span class="hljs-built_in">linear-gradient</span>(<span class="hljs-number">270deg</span>, <span class="hljs-number">#c2fff5</span>, <span class="hljs-number">#eec3f0</span>, <span class="hljs-number">#a1c1ff</span>);
    <span class="hljs-attribute">background-size</span>: <span class="hljs-number">600%</span> <span class="hljs-number">600%</span>;
    <span class="hljs-attribute">animation</span>: moving_bg <span class="hljs-number">30s</span> ease infinite;
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-keyword">function</span> <span class="hljs-title function_">make_background_animate</span>(<span class="hljs-params"></span>) {
    <span class="hljs-comment">// jQuery is used in this example to attach a class to the &lt;body&gt; tag.</span>
    <span class="hljs-comment">// You won&#x27;t see the animated background until you start interacting.</span>
    $(<span class="hljs-string">&#x27;body&#x27;</span>).<span class="hljs-title function_">addClass</span>(<span class="hljs-string">&#x27;moving&#x27;</span>);
  }

  <span class="hljs-title class_">Defer</span>(make_background_animate, <span class="hljs-number">0</span>, <span class="hljs-literal">true</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<ul>
<li><a href="#Defer">Defer(func, [delay], [waitForUserAction])</a> ⇒ <code>void</code><ul>
<li><a href="#Defer.lazy">.lazy</a> : <code>boolean</code> | <code>number</code></li>
<li><a href="#Defer.all">.all([selector], [delay], [waitForUserAction])</a> ⇒ <code>void</code></li>
<li><a href="#Defer.dom">.dom([selector], [delay], [unveiledClass], [resolver], [observeOptions])</a> ⇒ <code>void</code></li>
<li><a href="#Defer.css">.css(fileUrl, [id_or_attributes], [delay], [onload], [waitForUserAction])</a> ⇒ <code>void</code></li>
<li><a href="#Defer.js">.js(fileUrl, [id_or_attributes], [delay], [onload], [waitForUserAction])</a> ⇒ <code>void</code></li>
<li><a href="#Defer.reveal">.reveal(node, [unveiledClass])</a> ⇒ <code>void</code></li>
</ul>
</li>
</ul>
<hr>
<p><a name="Defer.lazy"></a></p>
<h3 id="id-deferlazy--boolean--number">Defer.lazy : <code>boolean</code> | <code>number</code></h3>
<p>The <code>Defer.lazy</code> variable was added since v3.0.</p>
<p>Setting <code>Defer.lazy=true</code> tells the library to delay executing
deferred scripts until the user starts interacting with the page,
regardless of the page load event.</p>
<p>Changing this variable will also affect the default value
of the <code>waitForUserAction</code> argument in these functions:</p>
<ul>
<li><a href="#Defer"><code>Defer()</code></a></li>
<li><a href="#Defer.all"><code>Defer.all()</code></a></li>
<li><a href="#Defer.css"><code>Defer.css()</code></a></li>
<li><a href="#Defer.js"><code>Defer.js()</code></a></li>
</ul>
<p><strong>Kind</strong>: static property of <a href="#Defer"><code>Defer</code></a><br><strong>Default</strong>: <code>(not set)</code><br><strong>Access</strong>: public<br><strong>Since</strong>: 3.0<br><strong>Example</strong><br>To override the default behavior of the <code>Defer()</code> method:</p>
<pre><code class="hljs language-html"><span class="hljs-comment">&lt;!-- You can put this right below the script tag containing defer.min.js --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"><span class="hljs-title class_">Defer</span>.<span class="hljs-property">lazy</span> = <span class="hljs-literal">true</span>;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><strong>Example</strong><br>You can set a timeout period in milliseconds for the <code>Defer.lazy</code>
variable or any <code>waitForUserAction</code> argument.
If no user interaction occurs within this timeout period, the scripts will still execute.</p>
<pre><code class="hljs language-html"><span class="hljs-comment">&lt;!-- You can set a timeout period in milliseconds --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"><span class="hljs-title class_">Defer</span>.<span class="hljs-property">lazy</span> = <span class="hljs-number">10000</span>; <span class="hljs-comment">// 10 seconds</span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p>This feature was added since v3.8.0.
View some use cases in <a href="https://github.com/shinsenter/defer.js/discussions/131#discussioncomment-8775870">this discussion</a>.</p>
<hr>
<p><a name="Defer.all"></a></p>
<h3 id="id-deferallselector-delay-waitforuseraction-⇒-void">Defer.all([selector], [delay], [waitForUserAction]) ⇒ <code>void</code></h3>
<p>Slow scripts (third-party libraries, add-ons, widgets, etc.)
may cause <a href="https://web.dev/vitals/">Web Vitals</a> issues in real-world scenarios.</p>
<p>Fully deferring <code>&lt;script&gt;</code> tags may help prevent Web Vitals issues on your page.</p>
<p>You can fully defer any script tag by setting its <code>type</code> attribute to <code>deferjs</code>.
This trick also works perfectly with <code>&lt;script&gt;</code> tags that have an <code>src</code> attribute.</p>
<p><strong>Kind</strong>: static method of <a href="#Defer"><code>Defer</code></a><br><strong>Note</strong>: (1) To avoid unexpected behavior when using
the <code>Defer.all()</code> method to delay executing script tags,
you should call the <code>Defer.all()</code> method with a regular script tag.<br><strong>Note</strong>: (2) Lazy loading behavior changed since v3.0
when you set <code>Defer.lazy=true</code> or <code>waitForUserAction=true</code>.
A <code>&lt;script&gt;</code> tag with <code>type=&quot;deferjs&quot;</code> will not execute
unless the user starts interacting with your page.<br><strong>Note</strong>: (3) Since v3.8.0, you can set a timeout period in milliseconds
for the <code>Defer.lazy</code> variable or any <code>waitForUserAction</code> argument.
If no user interaction occurs within this timeout period, the scripts will still execute.
View some use cases in <a href="https://github.com/shinsenter/defer.js/discussions/131#discussioncomment-8775870">this discussion</a>.<br><strong>Note</strong>: (4) The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload">Resource hints</a> feature was added since v3.2,
as it is recommended to prevent issues called &quot;<a href="https://blog.cloudflare.com/too-old-to-rocket-load-too-young-to-die/#quirksitamingthewaterfall">Taming the Waterfall</a>&quot;.
This feature is discussed in <a href="https://code.shin.company/defer.js/issues/112">#112</a>.<br><strong>Note</strong>: (5) Known Issue:
In iOS Safari, the first <code>click</code> event may not work
when using <code>Defer.all()</code> with <code>waitForUserAction</code> set to <code>true</code>
and one of the deferred scripts makes a DOM change.
View the discussion <a href="https://code.shin.company/defer.js/discussions/122">#122</a> for more details.<br><strong>Since</strong>: 2.0  </p>
<div class="table-responsive"><table class="table table-striped"><tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>[selector]</td>
<td><code>string</code></td>
<td><code>&quot;[type&#x3D;deferjs]&quot;</code></td>
<td>A CSS selector that selects target script tags that will be lazy loaded.</td>
</tr>
<tr>
<td>[delay]</td>
<td><code>number</code></td>
<td><code>0</code></td>
<td>A timespan, in milliseconds, that the page should wait before executing a script tag.</td>
</tr>
<tr>
<td>[waitForUserAction]</td>
<td><code>boolean</code> | <code>number</code></td>
<td><code>false</code></td>
<td>This argument tells the <code>Defer.all()</code> method to delay executing scripts until there is a user interaction.</td>
</tr>
</table></div><p><strong>Example</strong><br>Using the magic <code>type=&quot;deferjs&quot;</code> attribute:</p>
<p>Before:</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript">
  <span class="hljs-comment">// your JavaScript is here</span>
  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;This script is a normal script tag.&#x27;</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p>After:</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;deferjs&quot;</span>&gt;</span><span class="language-javascript">
  <span class="hljs-comment">// your JavaScript will still be here,</span>
  <span class="hljs-comment">// but it will not run unless the user starts interacting with your page.</span>
  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">info</span>(<span class="hljs-string">&#x27;This script is lazy loaded with type=&quot;deferjs&quot; attribute.&#x27;</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><strong>Example</strong><br>Using your value for the type attribute, such as <code>type=&quot;my-magic&quot;</code>:</p>
<p>If you don&#39;t like using the <code>type=&quot;deferjs&quot;</code> attribute,
you can choose your own by using the <code>Defer.all()</code> method.</p>
<p>Notice: To avoid unexpected behavior when using
the <code>Defer.all()</code> method to delay executing script tags,
you should call the <code>Defer.all()</code> method with a regular script tag.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;my-magic&quot;</span>&gt;</span><span class="language-javascript">
  <span class="hljs-comment">// your JavaScript will still be here,</span>
  <span class="hljs-comment">// but it will not run unless the user starts interacting with your page.</span>
  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(
    <span class="hljs-string">&#x27;This script is lazy loaded with type=&quot;my-magic&quot; attribute &#x27;</span> +
    <span class="hljs-string">&#x27;5 seconds after the user started interacting with your page.&#x27;</span>
  );
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

<span class="hljs-comment">&lt;!-- Place the below line after all other script tags --&gt;</span>
<span class="hljs-comment">&lt;!-- The 2nd argument means those script tags will be delayed 5000ms --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">all</span>(<span class="hljs-string">&#x27;script[type=&quot;my-magic&quot;]&#x27;</span>, <span class="hljs-number">5000</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><strong>Example</strong><br>Using the <code>Defer.all()</code> method for script tags with the <code>src</code> attribute:</p>
<p>Your scripts will work perfectly when you mix inline scripts
and script tags with a <code>src</code> attribute, like the example below.</p>
<p>The <code>waitForUserAction</code> argument (the fifth argument) is set to <code>true</code>,
the library will defer loading the tippy.js library until the user starts
interacting. When the user moves their mouse over the button, a tooltip will show.</p>
<p>Notice: To avoid unexpected behavior when using
the <code>Defer.all()</code> method to delay executing script tags,
you should call the <code>Defer.all()</code> method with a regular script tag.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;tooltip-button&quot;</span>&gt;</span>My button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;myscript&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/@popperjs/core@2&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;myscript&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/tippy.js@6&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;myscript&quot;</span>&gt;</span><span class="language-javascript">
  <span class="hljs-title function_">tippy</span>(<span class="hljs-string">&#x27;#tooltip-button&#x27;</span>, { <span class="hljs-attr">content</span>: <span class="hljs-string">&#x27;Hello from Defer.js!&#x27;</span> });
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">all</span>(<span class="hljs-string">&#x27;script[type=&quot;myscript&quot;]&#x27;</span>, <span class="hljs-number">500</span>, <span class="hljs-literal">true</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<hr>
<p><a name="Defer.dom"></a></p>
<h3 id="id-deferdomselector-delay-unveiledclass-resolver-observeoptions-⇒-void">Defer.dom([selector], [delay], [unveiledClass], [resolver], [observeOptions]) ⇒ <code>void</code></h3>
<p>The <code>Defer.dom()</code> method is useful in the following use cases:</p>
<ul>
<li>Lazy loading images, media, iframe tags, etc. on your website.</li>
<li>Preventing the download of third-party libraries or add-ons unless they are needed.</li>
<li>Scroll-reveal features, such as handling AJAX updates when a block enters the viewport.</li>
<li>An element deferred by <code>Defer.dom()</code> will be unveiled as soon as the page finishes loading.</li>
</ul>
<p>An element deferred by the <code>Defer.dom()</code> method will be unveiled
when it is about to enter the browser viewport.</p>
<p>The <code>Defer.dom()</code> method also converts <code>data-*</code> attributes of the elements
into non-data attributes (e.g., from <code>data-src</code> to <code>src</code>).</p>
<p>Please check out the examples below for more details.</p>
<p><strong>Kind</strong>: static method of <a href="#Defer"><code>Defer</code></a><br><strong>Since</strong>: 2.0  </p>
<div class="table-responsive"><table class="table table-striped"><tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>[selector]</td>
<td><code>string</code></td>
<td><code>&quot;[data-src]&quot;</code></td>
<td>A CSS selector that selects target HTML elements that will be unveiled later.</td>
</tr>
<tr>
<td>[delay]</td>
<td><code>number</code></td>
<td><code>0</code></td>
<td>A timespan, in milliseconds, that the page should wait before applying lazy loading to target elements.</td>
</tr>
<tr>
<td>[unveiledClass]</td>
<td><code>string</code></td>
<td></td>
<td>Class names that will be added to target elements when they are unveiled.</td>
</tr>
<tr>
<td>[resolver]</td>
<td><a href="#NodeHandler"><code>NodeHandler</code></a></td>
<td></td>
<td>A <a href="#NodeHandler">NodeHandler</a> that will check a <a href="#Node">Node</a> to determine if it will be unveiled or not. If the <code>resolver()</code> callback returns <code>false</code>, the node will not be unveiled.</td>
</tr>
<tr>
<td>[observeOptions]</td>
<td><code>object</code></td>
<td></td>
<td><a href="https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API#Intersection_observer_options">Intersection observer options</a></td>
</tr>
</table></div><p><strong>Example</strong><br>Using the <code>data-src</code> attribute to lazy load image tags.</p>
<p>The browser uses the <code>src</code> attribute of
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code> tags</a>
to trigger the image load.
It doesn&#39;t matter if it is the first or the 1,000th image in your HTML.</p>
<p>If the browser gets the <code>src</code> attribute,
it will trigger the image to be downloaded,
regardless of whether it is in or out of the current view.</p>
<p>To defer the load, put the image URL in an attribute other than <code>src</code>.
We specify the image URL in the <code>data-src</code> attribute of the image tag.
Sometimes, the <code>src</code> attribute could be used to download
a very small placeholder image before the real image gets downloaded.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;demo-basic&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;A lazy image&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;200&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;300&quot;</span> <span class="hljs-attr">loading</span>=<span class="hljs-string">&quot;lazy&quot;</span>
       <span class="hljs-attr">data-src</span>=<span class="hljs-string">&quot;https://picsum.photos/id/1003/200/300&quot;</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;A lazy image with a low-resolution placeholder&quot;</span>
       <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;200&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;300&quot;</span> <span class="hljs-attr">loading</span>=<span class="hljs-string">&quot;lazy&quot;</span>
       <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://picsum.photos/id/1002/20/30?blur&quot;</span>
       <span class="hljs-attr">data-src</span>=<span class="hljs-string">&quot;https://picsum.photos/id/1002/200/300&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">&#x27;#demo-basic img&#x27;</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><strong>Example</strong><br>Lazy loading a responsive image with <code>data-srcset</code> and <code>data-sizes</code> attributes.</p>
<p>Using the <code>srcset</code> attribute has made
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive image</a>
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.</p>
<p>We can also use the same trick as the above example.
We specify an image URL set in <code>data-srcset</code> and <code>data-sizes</code> attributes of the image tag.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;demo-srcset&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;A lazy image with srcset attribute&quot;</span>
       <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;200&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;300&quot;</span> <span class="hljs-attr">loading</span>=<span class="hljs-string">&quot;lazy&quot;</span>
       <span class="hljs-attr">data-sizes</span>=<span class="hljs-string">&quot;200w&quot;</span>
       <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://picsum.photos/id/204/20/30?blur&quot;</span>
       <span class="hljs-attr">data-src</span>=<span class="hljs-string">&quot;https://picsum.photos/id/204/200/300&quot;</span>
       <span class="hljs-attr">data-srcset</span>=<span class="hljs-string">&quot;https://picsum.photos/id/204/400/600 2x, https://picsum.photos/id/204/600/900 3x&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">&#x27;#demo-srcset img&#x27;</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><strong>Example</strong><br>Lazy loading a responsive image with flexible format selection.</p>
<p>Different browsers support different image formats.
We might want to send a fancy new image format such as
<a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#webp_image">WebP</a>
to browsers that can render it, and fall back to trusty old JPEGs in browsers that can&#39;t.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;demo-picture&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">picture</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">source</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;image/webp&quot;</span>
         <span class="hljs-attr">data-sizes</span>=<span class="hljs-string">&quot;200w&quot;</span>
         <span class="hljs-attr">data-src</span>=<span class="hljs-string">&quot;https://picsum.photos/id/1054/200/300.webp&quot;</span>
         <span class="hljs-attr">data-srcset</span>=<span class="hljs-string">&quot;https://picsum.photos/id/1054/400/600.webp 2x, https://picsum.photos/id/1054/600/900.webp 3x&quot;</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;A lazy image with srcset attribute&quot;</span>
         <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;200&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;300&quot;</span> <span class="hljs-attr">loading</span>=<span class="hljs-string">&quot;lazy&quot;</span>
         <span class="hljs-attr">data-sizes</span>=<span class="hljs-string">&quot;200w&quot;</span>
         <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://picsum.photos/id/1054/20/30?blur&quot;</span>
         <span class="hljs-attr">data-src</span>=<span class="hljs-string">&quot;https://picsum.photos/id/1054/200/300&quot;</span>
         <span class="hljs-attr">data-srcset</span>=<span class="hljs-string">&quot;https://picsum.photos/id/1054/400/600 2x, https://picsum.photos/id/1054/600/900 3x&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">picture</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">&#x27;#demo-picture picture&#x27;</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><strong>Example</strong><br>Basic usage with adding CSS classes.</p>
<p>The <code>Defer.dom()</code> method also allows you to add CSS class names when an element is unveiled.
In this example, we will add some CSS classes from Animate.css to make an <code>&lt;img&gt;</code> tag animate.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;demo-basic2&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;A lazy image with animation when loaded&quot;</span>
       <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;200&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;300&quot;</span> <span class="hljs-attr">loading</span>=<span class="hljs-string">&quot;lazy&quot;</span>
       <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://picsum.photos/id/1024/20/30?blur&quot;</span>
       <span class="hljs-attr">data-src</span>=<span class="hljs-string">&quot;https://picsum.photos/id/1024/200/300&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-comment">// this example is using animate.css library</span>
  <span class="hljs-comment">// see: https://animate.style</span>
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">&#x27;#demo-basic2 img&#x27;</span>, <span class="hljs-number">0</span>, <span class="hljs-string">&#x27;animate__animated animate__backInLeft&#x27;</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><strong>Example</strong><br>Lazy loading inline CSS background images.</p>
<p>We can also defer background images for any HTML tag other than <code>&lt;img&gt;</code> or <code>&lt;picture&gt;</code>.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css">
  <span class="hljs-selector-id">#demo-inline</span> <span class="hljs-selector-class">.image</span> {
    <span class="hljs-attribute">display</span>: inline-block;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;
    <span class="hljs-attribute">background</span>: transparent <span class="hljs-number">0</span> <span class="hljs-number">0</span> / cover no-repeat;
    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">150px</span>;
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;demo-inline&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;image&quot;</span> <span class="hljs-attr">data-style</span>=<span class="hljs-string">&quot;background-image:url(https://picsum.photos/id/1068/400/600)&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;image&quot;</span> <span class="hljs-attr">data-style</span>=<span class="hljs-string">&quot;background-image:url(https://picsum.photos/id/1069/400/600)&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;image&quot;</span> <span class="hljs-attr">data-style</span>=<span class="hljs-string">&quot;background-image:url(https://picsum.photos/id/1070/400/600)&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">&#x27;#demo-inline .image&#x27;</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><strong>Example</strong><br>Lazy loading CSS background images.</p>
<p>Just another example of lazy loading background images for HTML tags,
but we can also use CSS class names instead of inline <code>style</code> attributes.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css">
  <span class="hljs-selector-id">#demo-css</span> <span class="hljs-selector-class">.image</span> {
    <span class="hljs-attribute">display</span>: inline-block;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;
    <span class="hljs-attribute">background</span>: transparent <span class="hljs-number">0</span> <span class="hljs-number">0</span> / cover no-repeat;
    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">150px</span>;
  }
  <span class="hljs-selector-id">#pic1</span><span class="hljs-selector-class">.shown</span> {
    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">https://picsum.photos/id/106/400/600</span>);
  }
  <span class="hljs-selector-id">#pic2</span><span class="hljs-selector-class">.shown</span> {
    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">https://picsum.photos/id/206/400/600</span>);
  }
  <span class="hljs-selector-id">#pic3</span><span class="hljs-selector-class">.shown</span> {
    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">https://picsum.photos/id/306/400/600</span>);
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;demo-css&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;pic1&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;image&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;pic2&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;image&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;pic3&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;image&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">&#x27;#demo-css .image&#x27;</span>, <span class="hljs-number">0</span>, <span class="hljs-string">&#x27;shown&#x27;</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><strong>Example</strong><br>Lazy loading a video.</p>
<p>With the <code>Defer.dom()</code> method, we can easily defer loading various media tags, such as a <code>&lt;video&gt;</code> tag.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;demo-video&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">video</span> <span class="hljs-attr">autoplay</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">controls</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">muted</span>=<span class="hljs-string">&quot;true&quot;</span>
         <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;480&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;270&quot;</span>
         <span class="hljs-attr">data-poster</span>=<span class="hljs-string">&quot;https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerFun.jpg&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">source</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;video/mp4&quot;</span> <span class="hljs-attr">data-src</span>=<span class="hljs-string">&quot;https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4&quot;</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- &lt;source type=&quot;video/ogg&quot; data-src=&quot;https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.ogg&quot;&gt; --&gt;</span>
    <span class="hljs-comment">&lt;!-- &lt;source type=&quot;video/avi&quot; data-src=&quot;https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.avi&quot;&gt; --&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">video</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">&#x27;#demo-video video&#x27;</span>, <span class="hljs-number">0</span>, <span class="hljs-string">&#x27;shown&#x27;</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><strong>Example</strong><br>Lazy loading an iframe.</p>
<p>With the <code>Defer.dom()</code> method, we can effortlessly defer loading iframe tags.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;demo-iframe&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">iframe</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;An iframe example&quot;</span>
          <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;480&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;270&quot;</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">&quot;0&quot;</span>
          <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;about:blank&quot;</span>
          <span class="hljs-attr">data-src</span>=<span class="hljs-string">&quot;https://shinsenter.github.io/defer.js/&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">&#x27;#demo-iframe iframe&#x27;</span>, <span class="hljs-number">0</span>, <span class="hljs-string">&#x27;iframe-loaded&#x27;</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><strong>Example</strong><br>Lazy loading a YouTube video.</p>
<p>This example uses the <code>Defer.dom()</code> method to defer loading a YouTube iframe.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;demo-youtube&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">iframe</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;Understanding performance with Core Web Vitals&quot;</span>
          <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;480&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;270&quot;</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">allowfullscreen</span>=<span class="hljs-string">&quot;&quot;</span>
          <span class="hljs-attr">allow</span>=<span class="hljs-string">&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot;</span>
          <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;about:blank&quot;</span>
          <span class="hljs-attr">data-src</span>=<span class="hljs-string">&quot;https://www.youtube.com/embed/F0NYT7DIlDQ&quot;</span>
          <span class="hljs-attr">data-style</span>=<span class="hljs-string">&quot;background: transparent url(https://img.youtube.com/vi/F0NYT7DIlDQ/hqdefault.jpg) 50% 50% / cover no-repeat;&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">&#x27;#demo-youtube iframe&#x27;</span>, <span class="hljs-number">0</span>, <span class="hljs-string">&#x27;youtube-loaded&#x27;</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><strong>Example</strong><br>Lazy loading a Facebook post.</p>
<p>This example uses the <code>Defer.dom()</code> method to defer loading a <a href="https://developers.facebook.com/docs/plugins/embedded-posts/">Facebook post</a>.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;demo-facebook&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">iframe</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;An example of Facebook post&quot;</span>
          <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;480&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;270&quot;</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">&quot;0&quot;</span>
          <span class="hljs-attr">scrolling</span>=<span class="hljs-string">&quot;no&quot;</span> <span class="hljs-attr">allowtransparency</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">allow</span>=<span class="hljs-string">&quot;encrypted-media&quot;</span>
          <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;about:blank&quot;</span>
          <span class="hljs-attr">data-src</span>=<span class="hljs-string">&quot;https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fappseeds%2Fposts%2F1502937099839267<span class="hljs-symbol">&amp;amp;</span>width=480<span class="hljs-symbol">&amp;amp;</span>show_text=true<span class="hljs-symbol">&amp;amp;</span>height=200&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">&#x27;#demo-facebook iframe&#x27;</span>, <span class="hljs-number">0</span>, <span class="hljs-string">&#x27;facebook-loaded&#x27;</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><strong>Example</strong><br>Lazy loading a Discord chat box.</p>
<p>This example uses the <code>Defer.dom()</code> method to defer loading a Discord chat box.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">iframe</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;discord-widget&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;Discord&quot;</span>
        <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;480&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;270&quot;</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">&quot;0&quot;</span>
        <span class="hljs-attr">allowtransparency</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">sandbox</span>=<span class="hljs-string">&quot;allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts&quot;</span>
        <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;about:blank&quot;</span>
        <span class="hljs-attr">data-src</span>=<span class="hljs-string">&quot;https://discord.com/widget?id=962919929307357234<span class="hljs-symbol">&amp;amp;</span>theme=dark&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">&#x27;#discord-widget&#x27;</span>, <span class="hljs-number">0</span>, <span class="hljs-string">&#x27;discord-loaded&#x27;</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><strong>Example</strong><br>Scroll and reveal.</p>
<p>The <code>Defer.dom()</code> method also helps you perform an action when an element is unveiled.</p>
<p>In this example, when the user scrolls to the bottom of the page,
they will see a message as soon as an element with <code>id=&quot;surprise-me&quot;</code> appears.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">&#x27;#surprise-me&#x27;</span>, <span class="hljs-number">1000</span>, <span class="hljs-string">&#x27;seen&#x27;</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params">node</span>) {
    <span class="hljs-title function_">alert</span>(<span class="hljs-string">&#x27;Yay!\nYou have seen all examples. Have fun with Defer.js!&#x27;</span>);
  });
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<hr>
<p><a name="Defer.css"></a></p>
<h3 id="id-defercssfileurl-id_or_attributes-delay-onload-waitforuseraction-⇒-void">Defer.css(fileUrl, [id_or_attributes], [delay], [onload], [waitForUserAction]) ⇒ <code>void</code></h3>
<p>We use the <code>Defer.css()</code> method to defer loading
external CSS files without blocking the page rendering.</p>
<p><strong>Kind</strong>: static method of <a href="#Defer"><code>Defer</code></a><br><strong>Note</strong>: (1) Lazy loading behavior changed since v3.0
when you set <code>Defer.lazy=true</code> or <code>waitForUserAction=true</code>.
The <code>fileUrl</code> will not be fetched unless the user starts interacting with your page.<br><strong>Note</strong>: (2) Since v3.8.0, you can set a timeout period in milliseconds for the <code>waitForUserAction</code> argument.
If no user interaction occurs within this timeout period, the scripts will still execute.<br><strong>Since</strong>: 2.0  </p>
<div class="table-responsive"><table class="table table-striped"><tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>fileUrl</td>
<td><code>string</code></td>
<td></td>
<td>The URL of the CSS file that should be lazy loaded.</td>
</tr>
<tr>
<td>[id_or_attributes]</td>
<td><code>string</code> | <code>object</code></td>
<td></td>
<td>An ID string or an attribute object for the link tag that should be added to the page.</td>
</tr>
<tr>
<td>[delay]</td>
<td><code>number</code></td>
<td><code>0</code></td>
<td>A timespan, in milliseconds, that the page should wait before fetching the CSS file.</td>
</tr>
<tr>
<td>[onload]</td>
<td><code>function</code></td>
<td></td>
<td>A callback function that will be executed if the CSS file is successfully loaded.</td>
</tr>
<tr>
<td>[waitForUserAction]</td>
<td><code>boolean</code> | <code>number</code></td>
<td><code>false</code></td>
<td>This argument tells the <code>Defer.css()</code> method to delay downloading the CSS file until there is a user interaction.</td>
</tr>
</table></div><p><strong>Example</strong><br>Using the <code>Defer.css()</code> method to lazy load
<a href="https://fontawesome.com/docs/web/setup/get-started">FontAwesome</a> (CSS and some font files).</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css">
  <span class="hljs-selector-id">#demo-fontawesome</span> <span class="hljs-selector-class">.far</span> {
    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">3em</span>;
    <span class="hljs-attribute">color</span>: green;
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;demo-fontawesome&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;far fa-thumbs-up&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>@shinsenter/defer.js<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-keyword">var</span> fileUrl = <span class="hljs-string">&#x27;https://pro.fontawesome.com/releases/v5.14.0/css/all.css&#x27;</span>;

  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">css</span>(fileUrl, {<span class="hljs-attr">crossorigin</span>: <span class="hljs-string">&#x27;anonymous&#x27;</span>}, <span class="hljs-number">0</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">info</span>(<span class="hljs-string">&#x27;FontAwesome is loaded.&#x27;</span>); <span class="hljs-comment">// debug</span>
  });
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><strong>Example</strong><br>Lazy loading the Animate.css library.</p>
<p>In this example,
we set <code>waitForUserAction=5000</code> (the 5th parameter of the <code>Defer.css</code> function).
This means the website will wait until there is user interaction
before starting to load the <a href="https://animate.style/#documentation">Animate.css library</a>.
If more than 5 seconds pass without any user interaction,
the library will still be loaded and the scripts will execute.</p>
<p>When the Animate.css library is downloaded,
we will add CSS classes from Animate.css to every tag with <code>class=&quot;.demo&quot;</code> on the page.
No tag will be animated unless the user scrolls to its position.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-keyword">var</span> origin = <span class="hljs-string">&#x27;https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1&#x27;</span>;

  <span class="hljs-comment">// This script will lazy load animate.css library</span>
  <span class="hljs-comment">// only when the page is displayed on a screen-based device</span>
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">css</span>(origin + <span class="hljs-string">&#x27;/animate.min.css&#x27;</span>, {<span class="hljs-attr">media</span>: <span class="hljs-string">&#x27;screen&#x27;</span>}, <span class="hljs-number">0</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">info</span>(<span class="hljs-string">&#x27;Animate.css is loaded.&#x27;</span>); <span class="hljs-comment">// debug</span>

    <span class="hljs-comment">// adds animation classes to demo blocks.</span>
    <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">&#x27;.demo&#x27;</span>, <span class="hljs-number">100</span>, <span class="hljs-string">&#x27;animate__animated animate__fadeIn&#x27;</span>);
  }, <span class="hljs-number">5000</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<hr>
<p><a name="Defer.js"></a></p>
<h3 id="id-deferjsfileurl-id_or_attributes-delay-onload-waitforuseraction-⇒-void">Defer.js(fileUrl, [id_or_attributes], [delay], [onload], [waitForUserAction]) ⇒ <code>void</code></h3>
<p>We use the <code>Defer.js()</code> method to defer loading 3rd-party
JavaScript libraries, widgets, add-ons, etc. without blocking the page rendering.</p>
<p><strong>Kind</strong>: static method of <a href="#Defer"><code>Defer</code></a><br><strong>Note</strong>: (1) Because the download of a file using the <code>Defer.js()</code> method is asynchronous,
to avoid dependency errors when lazy loading a third-party library using the <code>Defer.js()</code> method,
it is highly recommended that the <code>onload</code> callback function be used
to ensure that the required library is completely defined.<br><strong>Note</strong>: (2) Lazy loading behavior changed since v3.0
when you set <code>Defer.lazy=true</code> or <code>waitForUserAction=true</code>.
The <code>fileUrl</code> will not be fetched unless the user starts interacting with your page.<br><strong>Note</strong>: (3) Since v3.8.0, you can set a timeout period in milliseconds for the <code>waitForUserAction</code> argument.
If no user interaction occurs within this timeout period, the scripts will still execute.<br><strong>Since</strong>: 2.0  </p>
<div class="table-responsive"><table class="table table-striped"><tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>fileUrl</td>
<td><code>string</code></td>
<td></td>
<td>The URL of the JavaScript file that should be lazy loaded.</td>
</tr>
<tr>
<td>[id_or_attributes]</td>
<td><code>string</code> | <code>object</code></td>
<td></td>
<td>An ID string or an attribute object for the script tag that should be added to the page.</td>
</tr>
<tr>
<td>[delay]</td>
<td><code>number</code></td>
<td><code>0</code></td>
<td>A timespan, in milliseconds, that the page should wait before fetching the JavaScript file.</td>
</tr>
<tr>
<td>[onload]</td>
<td><code>function</code></td>
<td></td>
<td>A callback function that will be executed if the JavaScript file is successfully loaded.</td>
</tr>
<tr>
<td>[waitForUserAction]</td>
<td><code>boolean</code> | <code>number</code></td>
<td><code>false</code></td>
<td>This argument tells the <code>Defer.js()</code> method to delay downloading the JavaScript file until there is a user interaction.</td>
</tr>
</table></div><p><strong>Example</strong><br>An alternative way to lazy load the Google Tag Manager script.</p>
<p>Using the <code>Defer.js()</code> method to lazy load the Google Tag Manager library and its external scripts.</p>
<p>In this example, we want the GTM to execute as soon as the page is loaded,
so the <code>waitForUserAction</code> argument (the fifth argument) is set to <code>false</code>.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-keyword">var</span> <span class="hljs-variable constant_">GTM_ID</span> = <span class="hljs-string">&#x27;UA-XXXXXXX-Y&#x27;</span>;
  <span class="hljs-variable language_">window</span>.<span class="hljs-property">dataLayer</span> = <span class="hljs-variable language_">window</span>.<span class="hljs-property">dataLayer</span> || [];
  dataLayer.<span class="hljs-title function_">push</span>([<span class="hljs-string">&#x27;js&#x27;</span>, <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>()]);
  dataLayer.<span class="hljs-title function_">push</span>([<span class="hljs-string">&#x27;config&#x27;</span>, <span class="hljs-variable constant_">GTM_ID</span>]);

  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">js</span>(<span class="hljs-string">&#x27;https://www.googletagmanager.com/gtag/js?id=&#x27;</span> + <span class="hljs-variable constant_">GTM_ID</span>, {<span class="hljs-string">&#x27;data-id&#x27;</span>: <span class="hljs-variable constant_">GTM_ID</span>}, <span class="hljs-number">0</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">info</span>(<span class="hljs-string">&#x27;Google Tag Manager is loaded.&#x27;</span>); <span class="hljs-comment">// debug</span>
  }, <span class="hljs-literal">false</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><strong>Example</strong><br>Lazy loading the Prism.js library.</p>
<p>Using Defer.js to lazy load the Prism.js library and its assets.
The <code>&lt;code&gt;</code> blocks on the page will be rendered
only when the user scrolls to any <code>code</code> block position.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css">
  pre {
    <span class="hljs-attribute">background-color</span>: honeydew;
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-comment">// turns on manual mode</span>
  <span class="hljs-variable language_">window</span>.<span class="hljs-property">Prism</span> = <span class="hljs-variable language_">window</span>.<span class="hljs-property">Prism</span> || {};
  <span class="hljs-title class_">Prism</span>.<span class="hljs-property">manual</span> = <span class="hljs-literal">true</span>;

  <span class="hljs-comment">// this script will lazy load Prism.js library and its dark theme.</span>
  <span class="hljs-comment">// when loading is done, it will apply code formatting to every &lt;code&gt; tag.</span>
  <span class="hljs-keyword">var</span> origin = <span class="hljs-string">&#x27;https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0&#x27;</span>;
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">css</span>(origin + <span class="hljs-string">&#x27;/themes/prism-tomorrow.min.css&#x27;</span>, <span class="hljs-string">&#x27;prism-css&#x27;</span>);
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">js</span>(origin + <span class="hljs-string">&#x27;/prism.min.js&#x27;</span>, <span class="hljs-string">&#x27;prism-js&#x27;</span>, <span class="hljs-number">0</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
    <span class="hljs-comment">// enables code highlighting for code tags using Defer.dom()</span>
    <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">&#x27;pre code&#x27;</span>, <span class="hljs-number">100</span>, <span class="hljs-string">&#x27;ide-loaded&#x27;</span>, <span class="hljs-title class_">Prism</span>.<span class="hljs-property">highlightElement</span>, {<span class="hljs-attr">rootMargin</span>: <span class="hljs-string">&quot;120%&quot;</span>});

    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">info</span>(<span class="hljs-string">&#x27;Prism.js is loaded.&#x27;</span>); <span class="hljs-comment">// debug</span>
  });
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p><strong>Example</strong><br>Lazy loading a Twitter post or timeline.</p>
<p>This example uses the <code>Defer.js()</code> and the <code>Defer.dom()</code> methods to defer loading a <a href="https://publish.twitter.com">Twitter post or timeline</a>.
The <code>.lazy-timeline</code> or <code>.lazy-tweet</code> blocks on the page will be rendered
only when the user scrolls to the target position.</p>
<pre><code class="hljs language-html">&lt;div id=<span class="hljs-string">&quot;demo-twitter&quot;</span>&gt;
  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;lazy-timeline&quot;</span> &lt;!<span class="hljs-attr">--</span> <span class="hljs-attr">the</span> <span class="hljs-attr">original</span> <span class="hljs-attr">is</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;twitter-timeline&quot;</span> <span class="hljs-attr">--</span>&gt;</span>
    href=&quot;https://twitter.com/xai&quot;
    data-chrome=&quot;nofooter noborders&quot;
    data-width=&quot;480&quot; data-height=&quot;600&quot; data-dnt=&quot;true&quot; data-theme=&quot;dark&quot;&gt;
    Tweets by @xAI
  <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></span>

  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">blockquote</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;lazy-tweet&quot;</span> <span class="hljs-attr">data-width</span>=<span class="hljs-string">&quot;480&quot;</span> &lt;!<span class="hljs-attr">--</span> <span class="hljs-attr">the</span> <span class="hljs-attr">original</span> <span class="hljs-attr">is</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;twitter-tweet&quot;</span> <span class="hljs-attr">--</span>&gt;</span>&gt;
    <span class="hljs-comment">&lt;!-- content is truncated --&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">blockquote</span>&gt;</span></span>
&lt;/div&gt;
<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
<span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">js</span>(<span class="hljs-string">&#x27;https://platform.twitter.com/widgets.js&#x27;</span>, <span class="hljs-string">&#x27;twitter-sdk&#x27;</span>, <span class="hljs-number">0</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">&#x27;.lazy-timeline&#x27;</span>, <span class="hljs-number">0</span>, <span class="hljs-string">&#x27;twitter-loaded&#x27;</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params">node</span>) {
    <span class="hljs-comment">// adds the correct class name for tweet element</span>
    node.<span class="hljs-property">className</span> = <span class="hljs-string">&#x27;twitter-timeline&#x27;</span>;

    <span class="hljs-comment">// For better performance,</span>
    <span class="hljs-comment">// we only search within the parent DOM tree for uninitialized widgets</span>
    twttr.<span class="hljs-property">widgets</span>.<span class="hljs-title function_">load</span>(node.<span class="hljs-property">parentNode</span>);
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">info</span>(<span class="hljs-string">&#x27;Twitter timeline is loaded.&#x27;</span>); <span class="hljs-comment">// debug</span>
  }, {<span class="hljs-attr">rootMargin</span>: <span class="hljs-string">&quot;200%&quot;</span>});

  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">&#x27;.lazy-tweet&#x27;</span>, <span class="hljs-number">0</span>, <span class="hljs-string">&#x27;twitter-loaded&#x27;</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params">node</span>) {
    <span class="hljs-comment">// adds the correct class name for timeline element</span>
    node.<span class="hljs-property">className</span> = <span class="hljs-string">&#x27;twitter-tweet&#x27;</span>;

    <span class="hljs-comment">// For better performance,</span>
    <span class="hljs-comment">// we only search within the parent DOM tree for uninitialized widgets</span>
    twttr.<span class="hljs-property">widgets</span>.<span class="hljs-title function_">load</span>(node.<span class="hljs-property">parentNode</span>);
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">info</span>(<span class="hljs-string">&#x27;Twitter post is loaded.&#x27;</span>); <span class="hljs-comment">// debug</span>
  }, {<span class="hljs-attr">rootMargin</span>: <span class="hljs-string">&quot;200%&quot;</span>});
});
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span>
</code></pre>
<p><strong>Example</strong><br>Lazy loading an Instagram post.</p>
<p>This example uses the <code>Defer.js()</code> and the <code>Defer.dom()</code> methods to defer loading an <a href="https://help.instagram.com/620154495870484">Instagram post</a>.
The <code>.lazy-instagram</code> block on the page will be rendered
only when the user scrolls to the target position.</p>
<pre><code class="hljs language-html">&lt;div id=<span class="hljs-string">&quot;demo-instagram&quot;</span>&gt;
  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">blockquote</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;lazy-instagram&quot;</span> &lt;!<span class="hljs-attr">--</span> <span class="hljs-attr">the</span> <span class="hljs-attr">original</span> <span class="hljs-attr">is</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;instagram-media&quot;</span> <span class="hljs-attr">--</span>&gt;</span>
    data-instgrm-captioned=&quot;&quot;
    data-instgrm-permalink=&quot;<span class="hljs-comment">&lt;!-- the URL is omitted --&gt;</span>&quot;&gt;
    <span class="hljs-comment">&lt;!-- content is truncated --&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">blockquote</span>&gt;</span></span>
&lt;/div&gt;
<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
<span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">js</span>(<span class="hljs-string">&#x27;https://www.instagram.com/embed.js&#x27;</span>, <span class="hljs-string">&#x27;instagram-sdk&#x27;</span>, <span class="hljs-number">0</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {
  <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">&#x27;.lazy-instagram&#x27;</span>, <span class="hljs-number">0</span>, <span class="hljs-string">&#x27;instagram-loaded&#x27;</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params">node</span>) {
    <span class="hljs-comment">// adds the correct class name for instagram post</span>
    node.<span class="hljs-property">className</span> = <span class="hljs-string">&#x27;instagram-media&#x27;</span>;

    <span class="hljs-comment">// For better performance,</span>
    <span class="hljs-comment">// we only search within the parent DOM tree for uninitialized widgets</span>
    instgrm.<span class="hljs-property">Embeds</span>.<span class="hljs-title function_">process</span>(node.<span class="hljs-property">parentNode</span>);
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">info</span>(<span class="hljs-string">&#x27;Instagram post is loaded.&#x27;</span>); <span class="hljs-comment">// debug</span>
  }, {<span class="hljs-attr">rootMargin</span>: <span class="hljs-string">&quot;200%&quot;</span>});
});
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span>
</code></pre>
<hr>
<p><a name="Defer.reveal"></a></p>
<h3 id="id-deferrevealnode-unveiledclass-⇒-void">Defer.reveal(node, [unveiledClass]) ⇒ <code>void</code></h3>
<p>Programmatically reveal a <a href="#Node">Node</a> that was lazy loaded by the library.</p>
<p><strong>Kind</strong>: static method of <a href="#Defer"><code>Defer</code></a><br><strong>Since</strong>: 2.1  </p>
<div class="table-responsive"><table class="table table-striped"><tr>
<th>Param</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td>node</td>
<td><a href="#Node"><code>Node</code></a></td>
<td>An HTML node that will be unveiled.</td>
</tr>
<tr>
<td>[unveiledClass]</td>
<td><code>string</code></td>
<td>Class names that will be added to the node when it is unveiled.</td>
</tr>
</table></div><p><strong>Example</strong>  </p>
<pre><code class="hljs language-js"><span class="hljs-comment">// reveals a single element</span>
<span class="hljs-keyword">var</span> node = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;my-video&#x27;</span>);
<span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">reveal</span>(node);

<span class="hljs-comment">// reveals multiple elements</span>
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">&#x27;.multi-lazy&#x27;</span>)
  .<span class="hljs-title function_">forEach</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">node</span>) {
    <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">reveal</span>(node);
  });

<span class="hljs-comment">// a shorthand for the above code</span>
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">&#x27;.multi-lazy&#x27;</span>).<span class="hljs-title function_">forEach</span>(<span class="hljs-title class_">Defer</span>.<span class="hljs-property">reveal</span>);

<span class="hljs-comment">// adds the &#x27;unveiled&#x27; classname when an element is unveiled</span>
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">&#x27;.multi-lazy&#x27;</span>)
  .<span class="hljs-title function_">forEach</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">node</span>) {
    <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">reveal</span>(node, <span class="hljs-string">&#x27;unveiled&#x27;</span>);
  });
</code></pre>
<hr>
<p><a name="defer"></a></p>
<h2 id="id-deferfunc-delay"><del>defer(func, [delay])</del></h2>
<p><em><strong>Deprecated</strong></em></p>
<p>Deprecated from version 2.0</p>
<p><strong>Kind</strong>: global function<br><strong>See</strong>: <a href="#Defer">Defer</a><br><strong>Since</strong>: 1.0  </p>
<div class="table-responsive"><table class="table table-striped"><tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
</tr>
<tr>
<td>func</td>
<td><code>function</code></td>
<td></td>
</tr>
<tr>
<td>[delay]</td>
<td><code>number</code></td>
<td><code>0</code></td>
</tr>
</table></div><hr>
<p><a name="deferimg"></a></p>
<h2 id="id-deferimgselector-delay-unveiledclass-resolver-observeoptions"><del>deferimg([selector], [delay], [unveiledClass], [resolver], [observeOptions])</del></h2>
<p><em><strong>Deprecated</strong></em></p>
<p>Deprecated from version 2.0</p>
<p><strong>Kind</strong>: global function<br><strong>See</strong>: <a href="#Defer.dom">dom</a><br><strong>Since</strong>: 1.0  </p>
<div class="table-responsive"><table class="table table-striped"><tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
</tr>
<tr>
<td>[selector]</td>
<td><code>string</code></td>
<td><code>&quot;[data-src]&quot;</code></td>
</tr>
<tr>
<td>[delay]</td>
<td><code>number</code></td>
<td><code>0</code></td>
</tr>
<tr>
<td>[unveiledClass]</td>
<td><code>string</code></td>
<td></td>
</tr>
<tr>
<td>[resolver]</td>
<td><a href="#NodeHandler"><code>NodeHandler</code></a></td>
<td></td>
</tr>
<tr>
<td>[observeOptions]</td>
<td><code>object</code></td>
<td></td>
</tr>
</table></div><hr>
<p><a name="deferiframe"></a></p>
<h2 id="id-deferiframeselector-delay-unveiledclass-resolver-observeoptions"><del>deferiframe([selector], [delay], [unveiledClass], [resolver], [observeOptions])</del></h2>
<p><em><strong>Deprecated</strong></em></p>
<p>Deprecated from version 2.0</p>
<p><strong>Kind</strong>: global function<br><strong>See</strong>: <a href="#Defer.dom">dom</a><br><strong>Since</strong>: 1.0  </p>
<div class="table-responsive"><table class="table table-striped"><tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
</tr>
<tr>
<td>[selector]</td>
<td><code>string</code></td>
<td><code>&quot;[data-src]&quot;</code></td>
</tr>
<tr>
<td>[delay]</td>
<td><code>number</code></td>
<td><code>0</code></td>
</tr>
<tr>
<td>[unveiledClass]</td>
<td><code>string</code></td>
<td></td>
</tr>
<tr>
<td>[resolver]</td>
<td><a href="#NodeHandler"><code>NodeHandler</code></a></td>
<td></td>
</tr>
<tr>
<td>[observeOptions]</td>
<td><code>object</code></td>
<td></td>
</tr>
</table></div><hr>
<p><a name="deferstyle"></a></p>
<h2 id="id-deferstylesrc-id-delay-onload"><del>deferstyle(src, [id], [delay], [onload])</del></h2>
<p><em><strong>Deprecated</strong></em></p>
<p>Deprecated from version 2.0</p>
<p><strong>Kind</strong>: global function<br><strong>See</strong>: <a href="#Defer.css">css</a><br><strong>Since</strong>: 1.0  </p>
<div class="table-responsive"><table class="table table-striped"><tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
</tr>
<tr>
<td>src</td>
<td><code>string</code></td>
<td></td>
</tr>
<tr>
<td>[id]</td>
<td><code>string</code></td>
<td></td>
</tr>
<tr>
<td>[delay]</td>
<td><code>number</code></td>
<td><code>0</code></td>
</tr>
<tr>
<td>[onload]</td>
<td><code>function</code></td>
<td></td>
</tr>
</table></div><hr>
<p><a name="deferscript"></a></p>
<h2 id="id-deferscriptsrc-id-delay-onload"><del>deferscript(src, [id], [delay], [onload])</del></h2>
<p><em><strong>Deprecated</strong></em></p>
<p>Deprecated from version 2.0</p>
<p><strong>Kind</strong>: global function<br><strong>See</strong>: <a href="#Defer.js">js</a><br><strong>Since</strong>: 1.0  </p>
<div class="table-responsive"><table class="table table-striped"><tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
</tr>
<tr>
<td>src</td>
<td><code>string</code></td>
<td></td>
</tr>
<tr>
<td>[id]</td>
<td><code>string</code></td>
<td></td>
</tr>
<tr>
<td>[delay]</td>
<td><code>number</code></td>
<td><code>0</code></td>
</tr>
<tr>
<td>[onload]</td>
<td><code>function</code></td>
<td></td>
</tr>
</table></div><hr>
<p><a name="Node"></a></p>
<h2 id="id-node">Node</h2>
<p>An abstract base class upon which many other DOM API objects are based.</p>
<p><strong>Kind</strong>: global typedef<br><strong>See</strong>: <a href="https://developer.mozilla.org/docs/Web/API/Node">https://developer.mozilla.org/docs/Web/API/Node</a>  </p>
<hr>
<p><a name="Function"></a></p>
<h2 id="id-function">Function</h2>
<p>A piece of code that can be executed, or a variable that refers to a function.</p>
<p><strong>Kind</strong>: global typedef<br><strong>See</strong>: <a href="https://developer.mozilla.org/docs/Glossary/Function">https://developer.mozilla.org/docs/Glossary/Function</a>  </p>
<hr>
<p><a name="NodeHandler"></a></p>
<h2 id="id-nodehandler-⇐-function">NodeHandler ⇐ <a href="#Function"><code>Function</code></a></h2>
<p>A <a href="#Function">Function</a> that receives a DOM <a href="#Node">Node</a> object as its argument.</p>
<p><strong>Kind</strong>: global typedef<br><strong>Extends</strong>: <a href="#Function"><code>Function</code></a>  </p>
<div class="table-responsive"><table class="table table-striped"><tr>
<th>Param</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td>node</td>
<td><a href="#Node"><code>Node</code></a></td>
<td>A <a href="#Node">Node</a> object</td>
</tr>
</table></div><hr>
<h2 id="id-documentation-in-other-languages">Documentation in Other Languages</h2>
<blockquote>
<p>[NEED HELP] Let&#39;s collaborate to make the documentation and examples even better!</p>
</blockquote>
<h3 id="id-日本語-japanese">日本語 (Japanese)</h3>
<p>For our Japanese readers, please refer to these helpful articles:</p>
<ul>
<li><a href="https://blog.gadgets-geek.net/2023/02/deferjs-doc-japanese.html">Defer.js Documentation (Japanese Translation) by Ataruchi</a><!--
20240318: I am temporarily hiding the following URLs because
their websites have advertisements that could potentially deceive users.</li>
<li><a href="https://www.heavy-peat.com/2022/02/defer.html">Article by HeavyPeat</a></li>
<li><a href="https://www.limosuki.com/2022/06/twitter-lazyload-deferjs.html">Article by Limosuki</a>
--&gt;</li>
</ul>
<blockquote>
<p>I would like to express warm gratitude to <a href="https://twitter.com/Ataruchi">@Ataruchi</a>, <a href="https://twitter.com/HeavyPeat">@HeavyPeat</a>, and <a href="https://www.limosuki.com/">Limosuki</a> for their helpful articles in Japanese.</p>
</blockquote>
<h2 id="id-browser-support">Browser Support</h2>
<p>Defer.js is compatible with all modern browsers, including:</p>
<ul>
<li>🖥 IE9+ / Edge <sup>(*)</sup></li>
<li>🖥 Firefox 4+</li>
<li>🖥 Safari 3+</li>
<li>🖥 Chrome</li>
<li>🖥 Opera</li>
<li>📱 Android 4+</li>
<li>📱 iOS 3.2+</li>
</ul>
<p><sup>(*) Legacy browsers like Internet Explorer 9 require the <code>IntersectionObserver</code> polyfill.</sup></p>
<h2 id="id-known-issues">Known Issues</h2>
<ul>
<li><a href="https://code.shin.company/defer.js/discussions/122">Discussion #122</a>:
In iOS Safari, the first <code>click</code> event may not work as expected when using <code>Defer.all()</code> with the <code>waitForUserAction</code> argument set to <code>true</code> and one of the deferred scripts makes a DOM change.</li>
</ul>
<hr>
<p>From Vietnam 🇻🇳 with love.</p>