Small Image/Video/Iframe Lazy Loader – yall.js

Preview:

Description:

yall.js is a really small JavaScript library to lazy load images, videos, iframe contents and background images as the users scroll through your content-heavy webpage.

Supports srcset attribute and picture element. Based on the Intersection Observer API.

How to use it:

Install it with NPM.

$ npm install yall

Include the minified & compiled JavaScript yall.min.js on the webpage.

<script src="yall.min.js" defer></script>

Initialize the yall.js and we’re ready to go.

document.addEventListener("DOMContentLoaded", yall);

Lazy load images with src attribute:

<img class="lazy" data-src="test-768w.jpg" src="placeholder.jpg" alt="Lazy loading &lt;img&gt; with src" title="Lazy loading &lt;img&gt; with src">
<noscript>
  <img src="test-768w.jpg" alt="&lt;noscript&gt; fallback for &lt;img&gt; with src" title="&lt;noscript&gt; fallback for &lt;img&gt; with src">
</noscript>

Lazy load images with srcset attribute:

<img class="lazy" data-srcset="test-768w.jpg 768w, test-1024w.jpg 1024w, test-1280w.jpg 1280w, test-1536w.jpg 1536w" data-src="test-768w.jpg" src="placeholder.jpg" alt="Lazy loading &lt;img&gt; with srcset" title="Lazy loading &lt;img&gt; with srcset">
<noscript>
  <img srcset="test-768w.jpg 768w, test-1024w.jpg 1024w, test-1280w.jpg 1280w, test-1536w.jpg 1536w" src="test-768w.jpg" alt="&lt;noscript&gt; fallback for &lt;img&gt; with srcset" title="&lt;noscript&gt; fallback for &lt;img&gt; with srcset">
</noscript>

Lazy load images with picture element:

<picture>
  <source data-srcset="test-768w.webp 768w, test-1024w.webp 1024w, test-1280w.webp 1280w, test-1536w.webp 1536w" srcset="placeholder.webp" type="image/webp">
  <source data-srcset="test-768w.jpg 768w, test-1024w.jpg 1024w, test-1280w.jpg 1280w, test-1536w.jpg 1536w" srcset="placeholder.jpg" type="image/jpeg">
  <img class="lazy" data-src="test-768w.jpg" src="placeholder.jpg" alt="Lazy loading &lt;img&gt; with src" title="Lazy loading &lt;img&gt; with src">
</picture>
<noscript>
  <picture>
    <source srcset="test-768w.webp 768w, test-1024w.webp 1024w, test-1280w.webp 1280w, test-1536w.webp 1536w" type="image/webp">
    <source srcset="test-768w.jpg 768w, test-1024w.jpg 1024w, test-1280w.jpg 1280w, test-1536w.jpg 1536w" type="image/jpeg">
    <img src="test-768w.jpg" alt="&lt;noscript&gt; fallback for &lt;img&gt; with src" title="&lt;noscript&gt; fallback for &lt;img&gt; with src">
  </picture>
</noscript>

Lazy load videos.

<video class="lazy" autoplay loop muted playsinline>
  <source data-src="1.webm" type="video/webm">
  <source data-src="1.mp4" type="video/mp4">
</video>
<!-- Without Autoplay. Shows poster until played -->
<video class="lazy" data-poster="placeholder.jpg" controls preload="none">
  <source data-src="1.webm" type="video/webm">
  <source data-src="1.mp4" type="video/mp4">
</video>

Lazy load iframe content.

<iframe class="lazy" data-src="1.html"></iframe>

Lazy load background image.

<div class="demo lazy-bg"></div>

.demo.lazy-bg-loaded {
  background: url("masthead.jpg");
}

Possible options to customize the lazy loader.

document.addEventListener("DOMContentLoaded", function() {
  yall({
    // CSS selectors
    lazyClass: "lazy",
    lazyBackgroundClass: "lazy-bg",
    lazyBackgroundLoaded: "lazy-bg-loaded",
    // timeout in milliseconds
    idleLoadTimeout: 200,
    // threshold in milliseconds
    threshold: 200,
    // set to true yall.js will assume you are not polyfilling IntersectionObserver, and will subsequently load all resources when it detects no support for IntersectionObserver
    noPolyfill: false,
    // uses MutationObserver to monitor DOM changes
    observeChanges: false,
    // event handlers
    events: {
      // The object key is sent as the first argument to `addEventListener`,
      // which is the event. The corresponding value can be the callback if you
      // don't want to send any options to `addEventListener`.
      load: function (event) {
        if (!event.target.classList.contains("lazy") && event.target.nodeName == "IMG") {
          event.target.classList.add("yall-loaded");
        }
      },
      // If we want to pass options to the third argument in `addEventListener`,
      // we can use a nested object syntax like so:
      error: {
        // Here, the `listener` member is the callback.
        listener: function (event) {
          if (!event.target.classList.contains("lazy") && event.target.nodeName == "IMG") {
            event.target.classList.add("yall-error");
          }
        },
        // The option below is sent as the third argument to `addEventListener`,
        // offering more control over how events are bound. If you want to
        // specify `useCapture` in lieu of options pass a boolean here instead.
        options: {
          once: true
        }
      }
    }
  });
});

Changelog:

v3.2.0 (04/04/2020)

• Add the noPolyfill option.
• Barring bugfixes, development of yall.js is complete. Please consider using native lazy loading instead if you can. A postinstall script will notify you of this on install from here on out.
• Small tweaks to keep file size in check.
• Fixed some wonky video autoplay issues

v3.1.8 (02/29/2020)

• Bugfixed

v3.1.6 (10/02/2019)

• Bugfixed