JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    ๐Ÿฅ‡ A super small, super efficient library that helps you lazy load almost everything like images, video, audio, iframes as well as stylesheets, and JavaScript.
    Filed under  โ€บ 

    • 🔾28%Overall
    • 228
    • 14.1 days
    • 🕩43
    • 👥7

    Package @shinsenter/defer.js

    ๐Ÿฅ‡ A JavaScript micro-library that helps you lazy load (almost) anything. Defer.js is zero-dependency, super-efficient, and Web Vitals friendly.

    NPM Snyk Vulnerabilities for npm package CodeFactor Grade


    GitHub Release Date GitHub package.json version npm bundle size (scoped) jsDelivr hits (npm)

    NPM

    [NEED HELP] Please help me improve the documentation and examples. I appreciate your love and support.


    Introduction

    Big CSS files, slow JavaScript (third-party add-ons, etc.), or media resources (photos, videos, iframes) on your website may cause Web Vitals issues in real scenarios.

    Fully deferring (lazy loading) those resources may help your website reduce those Web Vitals issues, or even deliver faster page load speed.

    You would be happy, and your customers would be happy, too.

    [Japanese] ๆ—ฅๆœฌไบบใฎๆ–นใฏใ“ใกใ‚‰ใฎ่จ˜ไบ‹ใ‚’ใ”ๅ‚่€ƒใซใ—ใฆ้ ‚ใ‘ใ‚Œใฐใจๆ€ใ„ใพใ™ใ€‚

    Why you should consider using Defer.js?

    • ๐Ÿงฉ Lazy load almost anything
    • ๐Ÿš€ Dependency-free, no jQuery, amazing fast
    • โšก๏ธ Super tiny (minzipped size is around 1KB)
    • ๐Ÿฆพ Hardened (over 3 years old and used in many apps)
    • ๐ŸŽฏ Core Web Vitals friendly
    • ๐Ÿค Works well with your favorite frameworks
    • ๐Ÿ”ฐ Very easy to use
    • ๐Ÿ“ฑ Smartphone browser friendly
    • โœ… Supports legacy browsers (IE9+)

    Browser support

    The library works perfectly on any modern browser. It also works on legacy browsers like Internet Explorer 9 * (with IntersectionObserver polyfill library).

    • ๐Ÿ–ฅ IE9+ / Microsoft EDGE
    • ๐Ÿ–ฅ Firefox 4+
    • ๐Ÿ–ฅ Safari 3+
    • ๐Ÿ–ฅ Chrome
    • ๐Ÿ–ฅ Opera
    • ๐Ÿ“ฑ Android 4+
    • ๐Ÿ“ฑ iOS 3.2+

    Getting started

    Basic

    Just put a <script> tag pointing to the library URL just below the opening <head> tag of your page.

    <head>
      <meta charset="UTF-8" />
      <title>My Awesome Page</title>
    
      <!-- Put defer.min.js here -->
      <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/defer.min.js"></script>
    
      <!-- ... -->
    </head>
    

    Inlining the library

    Because defer.min.js is optimized to a very tiny file size, you can even inline entire the library to save one HTTP request.

    <head>
      <meta charset="UTF-8" />
      <title>My Awesome Page</title>
    
      <!-- Copy the script from the below URL -->
      <!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/defer.min.js -->
      <script>/* then replace this comment block with the content of defer.min.js */</script>
    
      <!-- ... -->
    </head>
    

    Compatibility with older versions

    If you have no time to upgrade from an older version, just use defer_plus.min.js instead of defer.min.js.

    <head>
      <meta charset="UTF-8" />
      <title>My Awesome Page</title>
    
      <!-- Put defer_plus.min.js here -->
      <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/defer_plus.min.js"></script>
    
      <!-- ... -->
    </head>
    

    For OLD browsers (such as IE9)

    To take advantage of native performance for legacy browsers (such as IE9) that don't support IntersectionObserver feature, you should load IntersectionObserver polyfill library right after the defer.min.js script tag as the following example:

    <script>/* the content of defer.min.js */</script>
    
    <!-- If legacy browsers like Internet Explorer 9 still need to be supported -->
    <!-- Please put IntersectionObserver polyfill right after the Defer.js script tag -->
    <script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.4.0/dist/polyfill.min.js"><\/script>');</script>
    

    HINT: Modern browsers support IntersectionObserver feature, so you don't have to be concerned about it if you don't care about IE users.

    Functions

    Typedefs

    Defer(func, [delay], [waitForUserAction]) โ‡’ void

    Heavy DOM manipulations may cause render-blocking issues in real scenarios. Wrapping your script with Defer() may help your website prevent render-blocking issues.

    Kind: global function
    Since: 2.0

    Param Type Default Description
    func function A function to be executed after page fully loaded.
    [delay] number 0 The time, in milliseconds that it should wait before the function is executed.
    [waitForUserAction] boolean false This argument tells Defer() to delay the execution and wait until there is a user interaction.

    Example
    jQuery is used in this example to perform some DOM manipulations. This will attach <pre><code></code></pre> blocks to the document as soon as the page finished loading.

    <script>
      function generate_code_blocks () {
        $('.demo').each(function() {
          var code = $('<pre><code class="language-html"></code></pre>');
          var demo = $(this);
          var html = demo.html().trim().replace(/ {4}/g, '  ');
    
          code.children().text(html);
          demo.append(code);
        });
      }
    
      Defer(generate_code_blocks, 0);
    </script>
    

    Example
    Sometimes, you would like your code not to run unless there is user activity.

    The third argument tells Defer() to delay the execution of the function and wait until the user starts interacting with your page.

    <style>
      body.moving {
        background: linear-gradient(270deg, #ffffff, #e8f0c3, #ccf0c3);
        background-size: 600% 600%;
        animation: moving_bg 30s ease infinite;
      }
    </style>
    
    <script>
      function make_background_animate() {
        // jQuery is used in this example to attach a class to the <body> tag.
        // You won't see the animated background until you start interacting.
        $('body').addClass('moving');
      }
    
      Defer(make_background_animate, 0, true);
    </script>
    

    Defer.lazy : boolean

    The Defer.lazy variable was added since v3.0.

    Setting Defer.lazy=true tells the library to delay the execution of deferred scripts until the user starts interacting with the page regardless of the page load event.

    It will override the default behavior of waitForUserAction argument of the Defer() method.

    Changing this variable will also affect the behavior of these functions:

    Kind: static property of Defer
    Default: (not set)
    Access: public
    Since: 3.0
    Example
    To override the default behavior of the Defer() method.

    <!-- You can put this right below the script tag containing defer.min.js -->
    <script>Defer.lazy = true;</script>
    

    Defer.all([selector], [delay], [waitForUserAction]) โ‡’ void

    Slow scripts (third-party libraries, add-ons, widgets, etc.) may cause Web Vitals issues in real scenarios.

    Fully deferring <script> tags may help your page prevent Web Vitals issues.

    You can fully defer any script tag by setting its type attribute to deferjs. This trick also works perfectly with <script> tags with an src attribute.

    Kind: static method of Defer
    Note: (1) To avoid unexpected behavior when using the Defer.all() method to delay the execution of script tags, you should call run the Defer.all() method with a regular script tag.
    Note: (2) Lazy loading behavior changed since v3.0 when you set Defer.lazy=true or waitForUserAction=true. A <script> tags with type="deferjs" will not execute unless the user starts interacting with your page.
    Note: (3) Resource hints feature was added since v3.2 as it is recommended to prevent issues called "Taming the Waterfall". This feature is discussed at #112.
    Since: 2.0

    Param Type Default Description
    [selector] string "[type=deferjs]" A CSS selector selects target script tags that will be Lazy loaded.
    [delay] number 0 The time, in milliseconds that it should wait before a script tag is executed.
    [waitForUserAction] boolean false This argument tells the Defer.all() method to delay the execution of scripts until there is a user interaction.

    Example
    Using magic type="deferjs" attribute:

    Before:

    <script type="text/javascript">
      // your JavaScript is here
      console.log('This script is a normal script tag.');
    </script>
    

    After:

    <script type="deferjs">
      // your JavaScript will still be here,
      // but it will not run unless the user starts interacting with your page.
      console.info('This script is lazy loaded with type="deferjs" attribute.');
    </script>
    

    Example
    Using your value for the type attribute, such as type="my-magic":

    If you hate using the type="deferjs" attribute, you can even choose yours by using the Defer.all() method.

    Notice: To avoid unexpected behavior when using the Defer.all() method to delay the execution of script tags, you should call run the Defer.all() method with a regular script tag.

    <script type="my-magic">
      // your JavaScript will still be here,
      // but it will not run unless the user starts interacting with your page.
      console.log(
        'This script is lazy loaded with type="my-magic" attribute ' +
        '5 seconds after the user started interacting with your page.'
      );
    </script>
    
    <!-- Place the below line after all other script tags -->
    <!-- The 2nd argument means those script tags will be delayed 5000ms -->
    <script>
      Defer.all('script[type="my-magic"]', 5000);
    </script>
    

    Example
    Using the Defer.all() method for script tags with src attribute:

    Your scripts will work perfectly when you mix inline scripts and script tags with an src attribute, like the below example.

    The waitForUserAction argument (the fifth argument) is set to true, the library will defer the load of the tippy.js library until the user starts interacting, when the user moves his/her mouse on the button, a tooltip will show.

    Notice: To avoid unexpected behavior when using the Defer.all() method to delay the execution of script tags, you should call run the Defer.all() method with a regular script tag.

    <button id="tooltip-button">My button</button>
    
    <script type="myscript" src="https://unpkg.com/@popperjs/core@2"></script>
    <script type="myscript" src="https://unpkg.com/tippy.js@6"></script>
    
    <script type="myscript">
      tippy('#tooltip-button', { content: 'Hello from Defer.js!' });
    </script>
    
    <script>
      Defer.all('script[type="myscript"]', 0, true);
    </script>
    

    Defer.dom([selector], [delay], [unveiledClass], [resolver], [observeOptions]) โ‡’ void

    The Defer.dom() method is useful in the below use cases:

    • Lazy loading images, media, iframe tags, etc. on your website.
    • Prevent downloading third-party libraries or add-ons unless they are needed.
    • Scroll-reveal features, such as handling AJAX updating when a block is entering the viewport.
    • An element that was deferred by Defer.dom() will be unveiled as soon as the page finished loading.

    An element that was deferred by the Defer.dom() method will be unveiled when it going to enters the browser viewport.

    The Defer.dom() method also converts data-* attributes of the elements into non-data attributes (e.g. from data-src to src).

    Please check out the below examples for more details.

    Kind: static method of Defer
    Since: 2.0

    Param Type Default Description
    [selector] string "[data-src]" A CSS selector selects target HTML elements that will be unveiled later.
    [delay] number 0 The time, in milliseconds that it should wait before lazy loading is applied for target elements.
    [unveiledClass] string Class names that will be added to target elements when they are unveiled.
    [resolver] NodeHandler A NodeHandler will check a Node to determine if it will be unveiled or not. If the resolver returns false, the node will not be unveiled.
    [observeOptions] object Intersection observer options

    Example
    Using the data-src attribute to lazy load image tags.

    The browser uses the src attribute of <img> tags to trigger the image load. It doesn't matter if it is the first or the 1,000th image in your HTML.

    If the browser gets the src attribute, it will trigger the image to be downloaded, regardless of whether it is in or out of the current view.

    To defer the load, put the image URL in an attribute other than src. We specify the image URL in the data-src attribute of the image tag. Sometimes, the src attribute could be used to download a very small placeholder image before the real image gets downloaded.

    <div id="demo-basic">
      <img alt="A lazy image" width="200" height="300" loading="lazy"
           data-src="https://picsum.photos/id/1003/200/300">
    
      <img alt="A lazy image with a low-resolution placeholder"
           width="200" height="300" loading="lazy"
           src="https://picsum.photos/id/1002/20/30?blur"
           data-src="https://picsum.photos/id/1002/200/300">
    </div>
    
    <script>
      Defer.dom('#demo-basic img');
    </script>
    

    Example
    Lazy load a responsive image with data-srcset and data-sizes attributes.

    Using the srcset attribute has made responsive image sizing much simpler. It allows you to define a list of differently-sized versions of the same image, and provide information about the size of each one. Then, the client (browser) gets to make the decision.

    We can also use the same trick as the above examples. We specify an image URL set in data-srcset and data-sizes attributes of the image tag.

    <div id="demo-srcset">
      <img alt="A lazy image with srcset attribute"
           width="200" height="300" loading="lazy"
           data-sizes="200w"
           src="https://picsum.photos/id/204/20/30?blur"
           data-src="https://picsum.photos/id/204/200/300"
           data-srcset="https://picsum.photos/id/204/400/600 2x, https://picsum.photos/id/204/600/900 3x">
    </div>
    
    <script>
      Defer.dom('#demo-srcset img');
    </script>
    

    Example
    Lazy load a responsive image with flexible format selection.

    Different browsers support different image formats. We might want to send a fancy new image format such as WebP to browsers that can render it, and fall back to trusty old JPEGs in browsers that donโ€™t.

    We can also use the same trick as the above examples for picture tags, and their children's HTML nodes.

    <div id="demo-picture">
      <picture>
        <source type="image/webp"
             data-sizes="200w"
             data-src="https://picsum.photos/id/1054/200/300.webp"
             data-srcset="https://picsum.photos/id/1054/400/600.webp 2x, https://picsum.photos/id/1054/600/900.webp 3x">
    
        <img alt="A lazy image with srcset attribute"
             width="200" height="300" loading="lazy"
             data-sizes="200w"
             src="https://picsum.photos/id/1054/20/30?blur"
             data-src="https://picsum.photos/id/1054/200/300"
             data-srcset="https://picsum.photos/id/1054/400/600 2x, https://picsum.photos/id/1054/600/900 3x">
      </picture>
    </div>
    
    <script>
      Defer.dom('#demo-picture picture');
    </script>
    

    Example
    Basic usage with adding CSS class.

    The Defer.dom() method also allows you to add CSS class names when an element is unveiled. In this example, we will add some CSS class names to make an <img> tag animate.

    <div id="demo-basic2">
      <img alt="A lazy image with animation when loaded"
           width="200" height="300" loading="lazy"
           src="https://picsum.photos/id/1024/20/30?blur"
           data-src="https://picsum.photos/id/1024/200/300">
    </div>
    
    <script>
      // this example is using animate.css library
      // see: https://animate.style
      Defer.dom('#demo-basic2 img', 0, 'animate__animated animate__backInLeft');
    </script>
    

    Example
    Lazy load inline CSS background images.

    We can also defer background images for any HTML tag other than <img> or <picture>.

    <style>
      #demo-inline .image {
        display: inline-block;
        height: 300px;
        width: 200px;
        background: transparent 0 0 / cover no-repeat;
        border-radius: 150px;
      }
    </style>
    
    <div id="demo-inline">
      <div class="image" data-style="background-image:url(https://picsum.photos/id/1068/400/600)"></div>
      <div class="image" data-style="background-image:url(https://picsum.photos/id/1069/400/600)"></div>
      <div class="image" data-style="background-image:url(https://picsum.photos/id/1070/400/600)"></div>
    </div>
    
    <script>
      Defer.dom('#demo-inline .image');
    </script>
    

    Example
    Lazy load CSS background images.

    Just another example of lazy loading background images for HTML tags, but we can also use CSS class names instead of inline style attributes.

    <style>
      #demo-css .image {
        display: inline-block;
        height: 300px;
        width: 200px;
        background: transparent 0 0 / cover no-repeat;
        border-radius: 150px;
      }
      #pic1.shown {
        background-image: url(https://picsum.photos/id/106/400/600);
      }
      #pic2.shown {
        background-image: url(https://picsum.photos/id/206/400/600);
      }
      #pic3.shown {
        background-image: url(https://picsum.photos/id/306/400/600);
      }
    </style>
    
    <div id="demo-css">
      <div id="pic1" class="image"></div>
      <div id="pic2" class="image"></div>
      <div id="pic3" class="image"></div>
    </div>
    
    <script>
      Defer.dom('#demo-css .image', 0, 'shown');
    </script>
    

    Example
    Lazy load a video.

    With the Defer.dom() method, we can easily defer the load of various media tags, such as a <video> tag.

    <div id="demo-video">
      <video autoplay="true" controls="true" muted="true"
             width="480" height="270"
             data-poster="https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerFun.jpg">
        <source type="video/mp4" data-src="https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4">
        <!-- <source type="video/ogg" data-src="https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.ogg"> -->
        <!-- <source type="video/avi" data-src="https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.avi"> -->
      </video>
    </div>
    
    <script>
      Defer.dom('#demo-video video', 0, 'shown');
    </script>
    

    Example
    Lazy load an iframe.

    With the Defer.dom() method, we can effortlessly defer the load of iframe tags.

    <div id="demo-iframe">
      <iframe title="An iframe example"
              width="480" height="270" frameborder="0"
              src="about:blank"
              data-src="https://shinsenter.github.io/defer.js/">
      </iframe>
    </div>
    
    <script>
      Defer.dom('#demo-iframe iframe', 0, 'iframe-loaded');
    </script>
    

    Example
    Lazy load a Youtube video.

    This example uses the Defer.dom() method to defer a load of a Youtube iframe.

    <div id="demo-youtube">
      <iframe title="The new MacBook Air"
              width="480" height="270" frameborder="0" allowfullscreen=""
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              src="about:blank"
              data-src="https://www.youtube.com/embed/jwmS1gc9S5A"
              data-style="background: transparent url(https://img.youtube.com/vi/jwmS1gc9S5A/hqdefault.jpg) 50% 50% / cover no-repeat;">
      </iframe>
    </div>
    
    <script>
      Defer.dom('#demo-youtube iframe', 0, 'youtube-loaded');
    </script>
    

    Example
    Lazy load a Facebook post.

    This example uses the Defer.dom() method to defer a load of a Facebook post.

    <div id="demo-facebook">
      <iframe title="An example of Facebook post"
              width="480" height="270" frameborder="0"
              scrolling="no" allowtransparency="true" allow="encrypted-media"
              src="about:blank"
              data-src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fappseeds%2Fposts%2F1502937099839267&amp;width=480&amp;show_text=true&amp;height=200">
      </iframe>
    </div>
    
    <script>
      Defer.dom('#demo-facebook iframe', 0, 'facebook-loaded');
    </script>
    

    Example
    Lazy load a Discord chat box.

    This example uses the Defer.dom() method to defer a load of a Discord chat box.

    <iframe id="discord-widget" title="Discord"
            width="480" height="270" frameborder="0"
            allowtransparency="true" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
            src="about:blank"
            data-src="https://discord.com/widget?id=962919929307357234&amp;theme=dark">
    </iframe>
    
    <script>
      Defer.dom('#discord-widget', 0, 'discord-loaded');
    </script>
    

    Example
    Scroll and reveal.

    The Defer.dom() method also helps you do an action when an element is unveiled.

    In this example, when the user scrolls to the bottom of the page, he/she will see a message as soon as an element with id="surprise-me" appears.

    <script>
      Defer.dom('#surprise-me', 1000, 'seen', function(node) {
        alert('Yay!\n\nYou have seen all examples.\nHave fun with Defer.js!');
      });
    </script>
    

    Defer.css(fileUrl, [id], [delay], [onload], [waitForUserAction]) โ‡’ void

    We use the Defer.css() method to defer a load of external CSS files without blocking the page rendering.

    Kind: static method of Defer
    Note: Lazy loading behavior changed since v3.0 when you set Defer.lazy=true or waitForUserAction=true. The fileUrl will not be fetched unless the user starts interacting with your page.
    Since: 2.0

    Param Type Default Description
    fileUrl string URL to the CSS file that should be lazy loaded.
    [id] string The ID will be assigned to the script tag to avoid downloading the same file multiple times.
    [delay] number 0 The time, in milliseconds that the page should wait before the CSS file is fetched.
    [onload] function The callback function will be executed if the CSS file is successfully loaded.
    [waitForUserAction] boolean false This argument tells the Defer.css() method to delay downloading the CSS file until there is a user interaction.

    Example
    Using the Defer.css() method to lazy load FontAwesome (CSS and some font files).

    <style>
      #demo-fontawesome .far {
        font-size: 3em;
        color: green;
      }
    </style>
    
    <div id="demo-fontawesome">
      <i class="far fa-thumbs-up"></i>
      <code>@shinsenter/defer.js</code>
    </div>
    
    <script>
      var fileUrl = 'https://pro.fontawesome.com/releases/v5.14.0/css/all.css';
    
      Defer.css(fileUrl, 'fa5-css', 0, function() {
        console.info('FontAwesome is loaded.'); // debug
      });
    </script>
    

    Example
    Lazy load animate.css library.

    In this example, we want the download of the Animate.css library to wait for the first user interaction with your page so the waitForUserAction argument (the fifth argument) is set to true.

    When the Animate.css library was downloaded, we will add CSS classes from Animate.css to every tag with class=".demo" on the page. No tag will be animated unless the user scrolls to its position.

    <script>
      var origin = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1';
    
      // This script will lazy load animate.css library.
      Defer.css(origin + '/animate.min.css', 'animate-css', 0, function () {
        console.info('Animate.css is loaded.'); // debug
    
        // adds animation classes to demo blocks.
        Defer.dom('.demo', 100, 'animate__animated animate__fadeIn');
      }, true);
    </script>
    

    Defer.js(fileUrl, [id], [delay], [onload], [waitForUserAction]) โ‡’ void

    We use the Defer.js() method to defer a load of 3rd-party JavaScript libraries, widgets, add-ons, etc. without blocking the page rendering.

    Kind: static method of Defer
    Note: (1) Because the download of a file using the Defer.js() method is asynchronous, to avoid dependency error when lazy loading a third-party library using the Defer.js() method, it is highly recommended that the onload callback function be used to make sure that the library you needed is completely defined.
    Note: (2) Lazy loading behavior changed since v3.0 when you set Defer.lazy=true or waitForUserAction=true. The fileUrl will not be fetched unless the user starts interacting with your page.
    Since: 2.0

    Param Type Default Description
    fileUrl string URL to the js file that should be lazy loaded.
    [id] string The ID will be assigned to the script tag to avoid downloading the same file multiple times.
    [delay] number 0 The time, in milliseconds that the page should wait before the JS file is fetched.
    [onload] function The callback function will be executed if the js file is successfully loaded.
    [waitForUserAction] boolean false This argument tells the Defer.js() method to delay downloading the JS file until there is a user interaction.

    Example
    An alternative way to lazy load Google Tag Manager script.

    Using the Defer.js() method to lazy load Google Tag Manager library and its external scripts.

    In this example, we want the GTM to execute as soon as the page is loaded so the waitForUserAction argument (the fifth argument) is set to false.

    <script>
      var GTM_ID = 'UA-XXXXXXX-Y';
      window.dataLayer = window.dataLayer || [];
      dataLayer.push(['js', new Date()]);
      dataLayer.push(['config', GTM_ID]);
    
      Defer.js('https://www.googletagmanager.com/gtag/js?id=' + GTM_ID, 'google-tag', 0, function() {
        console.info('Google Tag Manager is loaded.'); // debug
      }, false);
    </script>
    

    Example
    Lazy load AddThis add-on.

    Using the Defer.js() method to lazy load AddThis Share Buttons and its external resources. AddThis add-on will not be loaded until the user starts interacting with the page (the waitForUserAction argument (the fifth argument) is set to true).

    <div class="demo-addthis"></div>
    
    <script>
      var fileUrl = 'https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5c68e61cf456f1cb';
      var loaded  = false;
    
      Defer.js(fileUrl, 'addthis-js', 0, function() {
        console.info('AddThis add-on is loaded.'); // debug
      }, true);
    </script>
    

    Example
    Lazy load Prism.js library.

    Using Defer.js to lazy load Prism.js library and its assets. The <code> blocks on the page will be rendered only when the user scrolls to any code block position.

    <style>
      pre {
        background-color: honeydew;
      }
    </style>
    
    <script>
      // turns on manual mode
      window.Prism = window.Prism || {};
      Prism.manual = true;
    
      // this script will lazy load Prism.js library and its dark theme.
      // when loading is done, it will apply code formatting to every <code> tag.
      var origin = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0';
      Defer.css(origin + '/themes/prism-tomorrow.min.css', 'prism-css');
      Defer.js(origin + '/prism.min.js', 'prism-js', 0, function () {
        // enables code highlighting for code tags using Defer.dom()
        Defer.dom('pre code', 100, 'ide-loaded', Prism.highlightElement, {rootMargin: "120%"});
    
        console.info('Prism.js is loaded.'); // debug
      });
    </script>
    

    Defer.reveal(node, [unveiledClass]) โ‡’ void

    Programmatically reveal a Node that was lazy loaded by the library.

    Kind: static method of Defer
    Since: 2.1

    Param Type Description
    node Node An HTML node that will be unveiled
    [unveiledClass] string Class names that will be added to the node when it is unveiled.

    Example

    // reveals a single element
    var node = document.getElementById('my-video');
    Defer.reveal(node);
    
    // reveals multiple elements
    document.querySelectorAll('.multi-lazy')
      .forEach(function(node) {
        Defer.reveal(node);
      });
    
    // a short-hand for the above code
    document.querySelectorAll('.multi-lazy').forEach(Defer.reveal);
    
    // adds 'unveiled' classname when an element unveiled
    document.querySelectorAll('.multi-lazy')
      .forEach(function(node) {
        Defer.reveal(node, 'unveiled');
      });
    

    defer(func, [delay])

    Deprecated

    Deprecated from version 2.0

    Kind: global function
    See: Defer
    Since: 1.0

    Param Type Default
    func function
    [delay] number 0

    deferimg([selector], [delay], [unveiledClass], [resolver], [observeOptions])

    Deprecated

    Deprecated from version 2.0

    Kind: global function
    See: dom
    Since: 1.0

    Param Type Default
    [selector] string "[data-src]"
    [delay] number 0
    [unveiledClass] string
    [resolver] NodeHandler
    [observeOptions] object

    deferiframe([selector], [delay], [unveiledClass], [resolver], [observeOptions])

    Deprecated

    Deprecated from version 2.0

    Kind: global function
    See: dom
    Since: 1.0

    Param Type Default
    [selector] string "[data-src]"
    [delay] number 0
    [unveiledClass] string
    [resolver] NodeHandler
    [observeOptions] object

    deferstyle(src, [id], [delay], [onload])

    Deprecated

    Deprecated from version 2.0

    Kind: global function
    See: css
    Since: 1.0

    Param Type Default
    src string
    [id] string
    [delay] number 0
    [onload] function

    deferscript(src, [id], [delay], [onload])

    Deprecated

    Deprecated from version 2.0

    Kind: global function
    See: js
    Since: 1.0

    Param Type Default
    src string
    [id] string
    [delay] number 0
    [onload] function

    Node

    An abstract base class upon which many other DOM API objects are based

    Kind: global typedef
    See: https://developer.mozilla.org/docs/Web/API/Node


    Function

    A code snippet that can be called, or a variable that refers to the function.

    Kind: global typedef
    See: https://developer.mozilla.org/docs/Glossary/Function


    NodeHandler โ‡ Function

    A Function receives a DOM Node object as its argument.

    Kind: global typedef
    Extends: Function

    Param Type Description
    node Node A Node object

    Community

    As an open-source project, we'd appreciate any help and contributions!

    Become a stargazer Report an issue Join us on Gitter Join us on Discord

    We should follow the standard GitHub pull request process. I'll try to review your contributions as soon as possible.

    It is also appreciated when you report an issue or open a discussion.

    Not ready to contribute code, but see something that needs work? From contributing to source code to improving the readability of the documentation, all suggestions are welcome!

    [NEED HELP] Please help me improve the documentation and examples.


    Support my activities

    If you like this repository, please become a stargazer on my GitHub or join Gitter to follow further updates.

    I also love to have your help, please consider buying me a coffee, or sponsoring my work so I can create more helpful pieces of stuff ๐Ÿ˜‰.

    Donate via PayPal Become a sponsor

    I appreciate your love and support.


    From Vietnam ๐Ÿ‡ป๐Ÿ‡ณ with love.

    Show All