<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's Web Vitals, leading to a slow and frustrating user experience. But what if you could seamlessly defer these resources and boost your website'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's Web Vitals. Whether you're using a modern or legacy browser, Defer.js makes it a breeze to enhance your website'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:shin@shin.company">shin@shin.company</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's performance by reducing loading times. Here'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><script></code> tag just below the opening <code><head></code> tag.</p> <pre><code class="hljs language-html"><span class="hljs-tag"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span> /></span> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>My Awesome Page<span class="hljs-tag"></<span class="hljs-name">title</span>></span> <span class="hljs-comment"><!-- Add Defer.js here --></span> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.8.0/dist/defer.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-comment"><!-- ... --></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></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"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span> /></span> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>My Awesome Page<span class="hljs-tag"></<span class="hljs-name">title</span>></span> <span class="hljs-comment"><!-- Add the Inlined Defer.js here --></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"><span class="hljs-comment">/* Defer.js content goes here */</span></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-comment"><!-- ... --></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></span> </code></pre> <h3 id="id-compatibility-with-older-versions">Compatibility with Older Versions</h3> <p>If you'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"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span> /></span> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>My Awesome Page<span class="hljs-tag"></<span class="hljs-name">title</span>></span> <span class="hljs-comment"><!-- Put defer_plus.min.js here --></span> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.8.0/dist/defer_plus.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-comment"><!-- ... --></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></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'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"><<span class="hljs-name">script</span>></span><span class="language-javascript"><span class="hljs-comment">/* Defer.js content */</span></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-comment"><!-- Add the IntersectionObserver Polyfill for legacy browsers --></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"><span class="hljs-string">'IntersectionObserver'</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">'<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.8.0/dist/polyfill.min.js"><\/script>'</span>);</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> </code></pre> <p><em>NOTE</em>: Modern browsers support the <code>IntersectionObserver</code> feature, so you don't have to worry about adding the polyfill if you don'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><pre><code></code></pre></code> blocks to the document as soon as the page finishes loading.</p> <pre><code class="hljs language-html"><span class="hljs-tag"><<span class="hljs-name">script</span>></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">'.demo'</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">'<pre><code class="language-html"></code></pre>'</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">' '</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"></<span class="hljs-name">script</span>></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"><<span class="hljs-name">style</span>></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"></<span class="hljs-name">style</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></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 <body> tag.</span> <span class="hljs-comment">// You won't see the animated background until you start interacting.</span> $(<span class="hljs-string">'body'</span>).<span class="hljs-title function_">addClass</span>(<span class="hljs-string">'moving'</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"></<span class="hljs-name">script</span>></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"><!-- You can put this right below the script tag containing defer.min.js --></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></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"></<span class="hljs-name">script</span>></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"><!-- You can set a timeout period in milliseconds --></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></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"></<span class="hljs-name">script</span>></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><script></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><script></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><script></code> tag with <code>type="deferjs"</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 "<a href="https://blog.cloudflare.com/too-old-to-rocket-load-too-young-to-die/#quirksitamingthewaterfall">Taming the Waterfall</a>". 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>"[type=deferjs]"</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="deferjs"</code> attribute:</p> <p>Before:</p> <pre><code class="hljs language-html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></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">'This script is a normal script tag.'</span>); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> </code></pre> <p>After:</p> <pre><code class="hljs language-html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"deferjs"</span>></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">'This script is lazy loaded with type="deferjs" attribute.'</span>); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> </code></pre> <p><strong>Example</strong><br>Using your value for the type attribute, such as <code>type="my-magic"</code>:</p> <p>If you don't like using the <code>type="deferjs"</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"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"my-magic"</span>></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">'This script is lazy loaded with type="my-magic" attribute '</span> + <span class="hljs-string">'5 seconds after the user started interacting with your page.'</span> ); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-comment"><!-- Place the below line after all other script tags --></span> <span class="hljs-comment"><!-- The 2nd argument means those script tags will be delayed 5000ms --></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">all</span>(<span class="hljs-string">'script[type="my-magic"]'</span>, <span class="hljs-number">5000</span>); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tooltip-button"</span>></span>My button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"myscript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/@popperjs/core@2"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"myscript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/tippy.js@6"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"myscript"</span>></span><span class="language-javascript"> <span class="hljs-title function_">tippy</span>(<span class="hljs-string">'#tooltip-button'</span>, { <span class="hljs-attr">content</span>: <span class="hljs-string">'Hello from Defer.js!'</span> }); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">all</span>(<span class="hljs-string">'script[type="myscript"]'</span>, <span class="hljs-number">500</span>, <span class="hljs-literal">true</span>); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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>"[data-src]"</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><img></code> tags</a> to trigger the image load. It doesn'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"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"demo-basic"</span>></span> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"A lazy image"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"300"</span> <span class="hljs-attr">loading</span>=<span class="hljs-string">"lazy"</span> <span class="hljs-attr">data-src</span>=<span class="hljs-string">"https://picsum.photos/id/1003/200/300"</span>></span> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"A lazy image with a low-resolution placeholder"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"300"</span> <span class="hljs-attr">loading</span>=<span class="hljs-string">"lazy"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://picsum.photos/id/1002/20/30?blur"</span> <span class="hljs-attr">data-src</span>=<span class="hljs-string">"https://picsum.photos/id/1002/200/300"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">'#demo-basic img'</span>); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"demo-srcset"</span>></span> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"A lazy image with srcset attribute"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"300"</span> <span class="hljs-attr">loading</span>=<span class="hljs-string">"lazy"</span> <span class="hljs-attr">data-sizes</span>=<span class="hljs-string">"200w"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://picsum.photos/id/204/20/30?blur"</span> <span class="hljs-attr">data-src</span>=<span class="hljs-string">"https://picsum.photos/id/204/200/300"</span> <span class="hljs-attr">data-srcset</span>=<span class="hljs-string">"https://picsum.photos/id/204/400/600 2x, https://picsum.photos/id/204/600/900 3x"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">'#demo-srcset img'</span>); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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't.</p> <pre><code class="hljs language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"demo-picture"</span>></span> <span class="hljs-tag"><<span class="hljs-name">picture</span>></span> <span class="hljs-tag"><<span class="hljs-name">source</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"image/webp"</span> <span class="hljs-attr">data-sizes</span>=<span class="hljs-string">"200w"</span> <span class="hljs-attr">data-src</span>=<span class="hljs-string">"https://picsum.photos/id/1054/200/300.webp"</span> <span class="hljs-attr">data-srcset</span>=<span class="hljs-string">"https://picsum.photos/id/1054/400/600.webp 2x, https://picsum.photos/id/1054/600/900.webp 3x"</span>></span> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"A lazy image with srcset attribute"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"300"</span> <span class="hljs-attr">loading</span>=<span class="hljs-string">"lazy"</span> <span class="hljs-attr">data-sizes</span>=<span class="hljs-string">"200w"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://picsum.photos/id/1054/20/30?blur"</span> <span class="hljs-attr">data-src</span>=<span class="hljs-string">"https://picsum.photos/id/1054/200/300"</span> <span class="hljs-attr">data-srcset</span>=<span class="hljs-string">"https://picsum.photos/id/1054/400/600 2x, https://picsum.photos/id/1054/600/900 3x"</span>></span> <span class="hljs-tag"></<span class="hljs-name">picture</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">'#demo-picture picture'</span>); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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><img></code> tag animate.</p> <pre><code class="hljs language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"demo-basic2"</span>></span> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"A lazy image with animation when loaded"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"300"</span> <span class="hljs-attr">loading</span>=<span class="hljs-string">"lazy"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://picsum.photos/id/1024/20/30?blur"</span> <span class="hljs-attr">data-src</span>=<span class="hljs-string">"https://picsum.photos/id/1024/200/300"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></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">'#demo-basic2 img'</span>, <span class="hljs-number">0</span>, <span class="hljs-string">'animate__animated animate__backInLeft'</span>); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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><img></code> or <code><picture></code>.</p> <pre><code class="hljs language-html"><span class="hljs-tag"><<span class="hljs-name">style</span>></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"></<span class="hljs-name">style</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"demo-inline"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"image"</span> <span class="hljs-attr">data-style</span>=<span class="hljs-string">"background-image:url(https://picsum.photos/id/1068/400/600)"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"image"</span> <span class="hljs-attr">data-style</span>=<span class="hljs-string">"background-image:url(https://picsum.photos/id/1069/400/600)"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"image"</span> <span class="hljs-attr">data-style</span>=<span class="hljs-string">"background-image:url(https://picsum.photos/id/1070/400/600)"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">'#demo-inline .image'</span>); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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"><<span class="hljs-name">style</span>></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"></<span class="hljs-name">style</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"demo-css"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pic1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"image"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pic2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"image"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pic3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"image"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">'#demo-css .image'</span>, <span class="hljs-number">0</span>, <span class="hljs-string">'shown'</span>); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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><video></code> tag.</p> <pre><code class="hljs language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"demo-video"</span>></span> <span class="hljs-tag"><<span class="hljs-name">video</span> <span class="hljs-attr">autoplay</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">controls</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">muted</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"480"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"270"</span> <span class="hljs-attr">data-poster</span>=<span class="hljs-string">"https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerFun.jpg"</span>></span> <span class="hljs-tag"><<span class="hljs-name">source</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"video/mp4"</span> <span class="hljs-attr">data-src</span>=<span class="hljs-string">"https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4"</span>></span> <span class="hljs-comment"><!-- <source type="video/ogg" data-src="https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.ogg"> --></span> <span class="hljs-comment"><!-- <source type="video/avi" data-src="https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.avi"> --></span> <span class="hljs-tag"></<span class="hljs-name">video</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">'#demo-video video'</span>, <span class="hljs-number">0</span>, <span class="hljs-string">'shown'</span>); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"demo-iframe"</span>></span> <span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"An iframe example"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"480"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"270"</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"about:blank"</span> <span class="hljs-attr">data-src</span>=<span class="hljs-string">"https://shinsenter.github.io/defer.js/"</span>></span> <span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">'#demo-iframe iframe'</span>, <span class="hljs-number">0</span>, <span class="hljs-string">'iframe-loaded'</span>); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"demo-youtube"</span>></span> <span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Understanding performance with Core Web Vitals"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"480"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"270"</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">allowfullscreen</span>=<span class="hljs-string">""</span> <span class="hljs-attr">allow</span>=<span class="hljs-string">"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"about:blank"</span> <span class="hljs-attr">data-src</span>=<span class="hljs-string">"https://www.youtube.com/embed/F0NYT7DIlDQ"</span> <span class="hljs-attr">data-style</span>=<span class="hljs-string">"background: transparent url(https://img.youtube.com/vi/F0NYT7DIlDQ/hqdefault.jpg) 50% 50% / cover no-repeat;"</span>></span> <span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">'#demo-youtube iframe'</span>, <span class="hljs-number">0</span>, <span class="hljs-string">'youtube-loaded'</span>); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"demo-facebook"</span>></span> <span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"An example of Facebook post"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"480"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"270"</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">scrolling</span>=<span class="hljs-string">"no"</span> <span class="hljs-attr">allowtransparency</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">allow</span>=<span class="hljs-string">"encrypted-media"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"about:blank"</span> <span class="hljs-attr">data-src</span>=<span class="hljs-string">"https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fappseeds%2Fposts%2F1502937099839267<span class="hljs-symbol">&amp;</span>width=480<span class="hljs-symbol">&amp;</span>show_text=true<span class="hljs-symbol">&amp;</span>height=200"</span>></span> <span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">'#demo-facebook iframe'</span>, <span class="hljs-number">0</span>, <span class="hljs-string">'facebook-loaded'</span>); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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"><<span class="hljs-name">iframe</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"discord-widget"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Discord"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"480"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"270"</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">allowtransparency</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">sandbox</span>=<span class="hljs-string">"allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"about:blank"</span> <span class="hljs-attr">data-src</span>=<span class="hljs-string">"https://discord.com/widget?id=962919929307357234<span class="hljs-symbol">&amp;</span>theme=dark"</span>></span> <span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">'#discord-widget'</span>, <span class="hljs-number">0</span>, <span class="hljs-string">'discord-loaded'</span>); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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="surprise-me"</code> appears.</p> <pre><code class="hljs language-html"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">'#surprise-me'</span>, <span class="hljs-number">1000</span>, <span class="hljs-string">'seen'</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params">node</span>) { <span class="hljs-title function_">alert</span>(<span class="hljs-string">'Yay!\nYou have seen all examples. Have fun with Defer.js!'</span>); }); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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"><<span class="hljs-name">style</span>></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"></<span class="hljs-name">style</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"demo-fontawesome"</span>></span> <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"far fa-thumbs-up"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> <span class="hljs-tag"><<span class="hljs-name">code</span>></span>@shinsenter/defer.js<span class="hljs-tag"></<span class="hljs-name">code</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-keyword">var</span> fileUrl = <span class="hljs-string">'https://pro.fontawesome.com/releases/v5.14.0/css/all.css'</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">'anonymous'</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">'FontAwesome is loaded.'</span>); <span class="hljs-comment">// debug</span> }); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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=".demo"</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"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-keyword">var</span> origin = <span class="hljs-string">'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1'</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">'/animate.min.css'</span>, {<span class="hljs-attr">media</span>: <span class="hljs-string">'screen'</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">'Animate.css is loaded.'</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">'.demo'</span>, <span class="hljs-number">100</span>, <span class="hljs-string">'animate__animated animate__fadeIn'</span>); }, <span class="hljs-number">5000</span>); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-keyword">var</span> <span class="hljs-variable constant_">GTM_ID</span> = <span class="hljs-string">'UA-XXXXXXX-Y'</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">'js'</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">'config'</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">'https://www.googletagmanager.com/gtag/js?id='</span> + <span class="hljs-variable constant_">GTM_ID</span>, {<span class="hljs-string">'data-id'</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">'Google Tag Manager is loaded.'</span>); <span class="hljs-comment">// debug</span> }, <span class="hljs-literal">false</span>); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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><code></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"><<span class="hljs-name">style</span>></span><span class="language-css"> pre { <span class="hljs-attribute">background-color</span>: honeydew; } </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></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 <code> tag.</span> <span class="hljs-keyword">var</span> origin = <span class="hljs-string">'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0'</span>; <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">css</span>(origin + <span class="hljs-string">'/themes/prism-tomorrow.min.css'</span>, <span class="hljs-string">'prism-css'</span>); <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">js</span>(origin + <span class="hljs-string">'/prism.min.js'</span>, <span class="hljs-string">'prism-js'</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">'pre code'</span>, <span class="hljs-number">100</span>, <span class="hljs-string">'ide-loaded'</span>, <span class="hljs-title class_">Prism</span>.<span class="hljs-property">highlightElement</span>, {<span class="hljs-attr">rootMargin</span>: <span class="hljs-string">"120%"</span>}); <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">info</span>(<span class="hljs-string">'Prism.js is loaded.'</span>); <span class="hljs-comment">// debug</span> }); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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"><div id=<span class="hljs-string">"demo-twitter"</span>> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lazy-timeline"</span> <!<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">"twitter-timeline"</span> <span class="hljs-attr">--</span>></span> href="https://twitter.com/xai" data-chrome="nofooter noborders" data-width="480" data-height="600" data-dnt="true" data-theme="dark"> Tweets by @xAI <span class="hljs-tag"></<span class="hljs-name">a</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">blockquote</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lazy-tweet"</span> <span class="hljs-attr">data-width</span>=<span class="hljs-string">"480"</span> <!<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">"twitter-tweet"</span> <span class="hljs-attr">--</span>></span>> <span class="hljs-comment"><!-- content is truncated --></span> <span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span></span> </div> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">js</span>(<span class="hljs-string">'https://platform.twitter.com/widgets.js'</span>, <span class="hljs-string">'twitter-sdk'</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">'.lazy-timeline'</span>, <span class="hljs-number">0</span>, <span class="hljs-string">'twitter-loaded'</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">'twitter-timeline'</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">'Twitter timeline is loaded.'</span>); <span class="hljs-comment">// debug</span> }, {<span class="hljs-attr">rootMargin</span>: <span class="hljs-string">"200%"</span>}); <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">dom</span>(<span class="hljs-string">'.lazy-tweet'</span>, <span class="hljs-number">0</span>, <span class="hljs-string">'twitter-loaded'</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">'twitter-tweet'</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">'Twitter post is loaded.'</span>); <span class="hljs-comment">// debug</span> }, {<span class="hljs-attr">rootMargin</span>: <span class="hljs-string">"200%"</span>}); }); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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"><div id=<span class="hljs-string">"demo-instagram"</span>> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">blockquote</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lazy-instagram"</span> <!<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">"instagram-media"</span> <span class="hljs-attr">--</span>></span> data-instgrm-captioned="" data-instgrm-permalink="<span class="hljs-comment"><!-- the URL is omitted --></span>"> <span class="hljs-comment"><!-- content is truncated --></span> <span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span></span> </div> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-title class_">Defer</span>.<span class="hljs-title function_">js</span>(<span class="hljs-string">'https://www.instagram.com/embed.js'</span>, <span class="hljs-string">'instagram-sdk'</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">'.lazy-instagram'</span>, <span class="hljs-number">0</span>, <span class="hljs-string">'instagram-loaded'</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">'instagram-media'</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">'Instagram post is loaded.'</span>); <span class="hljs-comment">// debug</span> }, {<span class="hljs-attr">rootMargin</span>: <span class="hljs-string">"200%"</span>}); }); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></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">'my-video'</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">'.multi-lazy'</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">'.multi-lazy'</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 'unveiled' 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">'.multi-lazy'</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">'unveiled'</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>"[data-src]"</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>"[data-src]"</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'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> --></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>