index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Lazy Load Images with Intersection Observer</title>


    <link rel="stylesheet" href="dist/css/demo.css">
    <link rel="stylesheet" href="src/demo/css/prism.css">

    <!-- for the css background immage lazy load example -->
    <style>
        .lazyload-bg {
            margin: 16px 40px;
            height: 260px;
            width: 100%;
            background-image: url("img/dry-tortuga-np-lq-40w.jpg");
            background-repeat: no-repeat;
            background-size: contain;
            /*background-position: center center;*/
        }
    </style>


    <!-- caniuse embed script -->
    <!-- found here https://caniuse.bitsofco.de/ -->
    <script src="https://cdn.jsdelivr.net/gh/ireade/caniuse-embed/public/caniuse-embed.min.js" async></script>
    <!-- demo code highlight -->
    <script src="src/demo/js/prism.js"></script>
    <!-- intersection observer polyfill -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
    <!-- the iolazy load library -->
    <script src="dist/js/iolazy.min.js" defer></script>

</head>
<body>

<main class="">
    <header class="container column">
        <h1>IOLazy Demo</h1>
        <p>
            A small JavaScript image lazy loading library based off of <a
                href="https://corydowdy.com/blog/lazy-loading-images-with-intersection-observer">Lazy Loading Images
            with Intersection Observer</a>
        </p>
        <nav>
            <ul class="no-bullet quick-nav">
                <li>
                    <a class="page-nav" href="#setup">Setup</a>
                </li>
                <li>
                    <a class="page-nav" href="#options">Options</a>
                </li>
                <li>
                    <a class="page-nav" href="#browser_support">Browser Support</a>
                </li>
                <li>
                    <a class="page-nav" href="#native">Using Native Lazy Load</a>
                </li>
            </ul>
        </nav>
    </header>
    <section class="container column">
        <h2 id="setup">
            <a href="#setup" class="page-nav">Setup</a>
        </h2>

        <div class="numbered">
            <p class="list-code-example">
                Grab the latest release from <a href="https://github.com/cdowdy/io-lazyload/releases/latest">io-lazyload
                releases</a>
            </p>
            <p class="list-code-example">
                Or install it through NPM with <code class="language-bash">npm install iolazyload</code>
            </p>
            <p class="list-code-example">
                Place <code class="language-markup">iolazy.min.js</code> from <em>dist/js</em> as the last script in the
                head of your document.
            </p>
            <pre class="language-markup"><code>&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;

    &lt;!-- intersection observer polyfill --&gt;
    &lt;script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"&gt;&lt;/script&gt;
   &lt;!-- the iolazy load library --&gt;
    &lt;script src="dist/js/iolazy.min.js" defer&gt;&lt;/script&gt;
&lt;/head&gt;</code></pre>
            <p class="list-code-example">
                Add the class of <code class="language-markup">lazyload</code> to the image(s) you wish to lazyload and
                modify the src attribute to read <code class="language-markup">data-src</code>
            </p>
            <pre class="language-markup"><code>&lt;img data-src="your/image.jpg" alt="your alt text" class="lazyload" &gt;</code></pre>
            <p class="list-code-example">
                Initialize the script before the closing body tag (or in your own JS file)
            </p>
            <pre class="language-markup"><code>&lt;script&gt;
document.addEventListener("DOMContentLoaded", function () {
    new IOlazy();
});
&lt;/script&gt;
&lt;/body&gt;</code></pre>
        </div>
    </section>
    <div class="container">
        <h2>Examples</h2>
    </div>
    <div class="container demos-photo-grid">
        <figure class="lightbox-figure">

            <img id="one" sizes="(min-width: 530px) 25vw, 100vw"
                 data-srcset="img/640-177w.png 177w,
                     img/640-240w.png 240w,
                     img/640-321w.png 321w,
                     img/thumb/640-th.png 367w"

                 data-src="img/thumb/640-th.png"
                 alt="orange rectangle with the number 640 in the center"
                 class="lazyload"
                 width="100%">
        </figure>

        <figure class="lightbox-figure">

            <img id="two" sizes="25vw" data-src="img/thumb/lena-th.jpg"
                 alt="lena reference image"
                 class="lazyload"
                 width="100%">
            <figcaption>
                <p>
                    Lena Reference Image from: <a href="http://www.ece.rice.edu/~wakin/images/">Standard Test Images Duncan Hall at Rice University</a>
                </p>
            </figcaption>
        </figure>

        <figure class="lightbox-figure">

            <img id="three" sizes="25vw" data-src="img/thumb/mp4webm-th.jpg"
                 alt="webm logo"
                 class="lazyload"
                 width="100%">
            <figcaption>
                <p>WebM logo from: <a href="https://commons.wikimedia.org/wiki/File:Webm-logo.png">WikiMedia Commons </a></p>
            </figcaption>
        </figure>

        <figure class="lightbox-figure">

            <img id="four" sizes="25vw"
                 data-src="img/thumb/pineapples-800-th.jpg"
                 alt="pinapple in a field"
                 class="lazyload"
                 width="100%">
            <figcaption>
                <p class="popup-caption">
                    Image from <a href="https://unsplash.com/pineapple">unsplash.com/pineapple</a> By Scott Web at <a href="http://pineapples.io/">pineapples.io</a>
                </p>
            </figcaption>
        </figure>

        <figure class="lightbox-figure">

            <img id="five" sizes="25vw"
                 data-src="img/thumb/playground-1-th.jpg"
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 alt="a kids playground"
                 class="lazyload"
                 width="100%">
            <figcaption>
                <p>
                    Image from: <a
                        href="https://commons.wikimedia.org/wiki/File:2009-04-21_Hampton_Forest_Apartment_Homes_playground.jpg">Wikimedia Commons by Ildar Sagdejev</a>
                </p>
            </figcaption>
        </figure>

        <figure class="lightbox-figure">

            <img id="six" sizes="25vw"
                 data-src="img/thumb/red_panda_stretching-th.jpg"
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 alt="a red panda being it's natural self which is awesome and is stretching"
                 class="lazyload"
                 width="100%" >
            <figcaption>
                <p class="center-text">
                    Red Panda Stretching By <a class="external-link" href="https://www.flickr.com/photos/ekilby/11061337434">Eric Kilby</a>
                </p>
            </figcaption>
        </figure>
        <figure class="lightbox-figure">
            <img id="seven" sizes="(min-width: 530px) 25vw, 100vw"
                 data-srcset="https://source.unsplash.com/collection/246/175x125 175w,
                     https://source.unsplash.com/collection/246/240x170 240w,
                     https://source.unsplash.com/collection/246/321x227 321w"

                 src="https://source.unsplash.com/collection/246/240x170"
                 alt=""
                 class="lazyload"
                 width="100%" >
            <figcaption>
                <p>Images From: <a href="https://unsplash.com/collections/246/tempest">Unsplash.com Collection Tempest</a></p>
            </figcaption>
        </figure>

        <figure class="lightbox-figure">
            <img id="eight" sizes="(min-width: 530px) 25vw, 100vw"
                 data-srcset="https://source.unsplash.com/collection/263320/175x125 175w,
                     https://source.unsplash.com/collection/263320/240x170 240w,
                     https://source.unsplash.com/collection/263320/321x227 321w"

                 src="https://source.unsplash.com/collection/263320/240x170"
                 alt=""
                 class="lazyload"
                 width="100%" >
            <figcaption>
                <p>
                    Images from: <a href="https://unsplash.com/collections/263320">Unsplash.com Collection Fear</a>
                </p>
            </figcaption>
        </figure>

        <figure class="lightbox-figure">

            <img id="nine" sizes="(min-width: 530px) 25vw, 100vw"
                 data-srcset="https://source.unsplash.com/collection/1525582/175x125 175w,
                     https://source.unsplash.com/collection/1525582/240x170 240w,
                     https://source.unsplash.com/collection/1525582/321x227 321w"

                 src="https://source.unsplash.com/collection/1525582/240x170"
                 alt=""
                 class="lazyload"
                 width="100%" >
            <figcaption>
                <p>
                    Uses <code class="language-javascript">rootMargin</code>
                    Images from: <a href="https://unsplash.com/collections/1525582/above-the-trees-%F0%9F%8C%B2">Unsplash.com Collection Above The Trees</a>
                </p>
            </figcaption>
        </figure>

        <!-- a css background image -->
        <div class="lightbox-figure lazyload-bg" >
            <p>
                This Is a background image in CSS
            </p>
        </div>
    </div>

    <section  class="container column">
        <h2 id="options">
            <a href="#options" class="page-nav">Options</a>
        </h2>
        <p>
            There are three (3) options available to pass to IOlazy:
        </p>
        <ul>
            <li>
                <code class="language-javascript">image</code>
            </li>
            <li>
                <code class="language-javascript">threshold</code>
            </li>
            <li>
                <code class="language-javascript">rootMargin</code>
            </li>
        </ul>
        <p><b>image</b></p>
        <p>
            This is the class or image element you wish to lazy load.
        </p>
        <pre class="language-markup"><code>&lt;!-- lazy load all images with the class 'lazy' --&gt;
&lt;script&gt;
  document.addEventListener("DOMContentLoaded", function () {
    new IOlazy({
       image: '.lazy'
    });
});
&lt;/script&gt;
&lt;!-- lazy load all image elements --&gt;
&lt;script&gt;
  document.addEventListener("DOMContentLoaded", function () {
    new IOlazy({
       image: 'img'
    });
});
&lt;/script&gt;
        </code></pre>

        <p><b>Threshold</b></p>
        <p>
            How much the image element should be visible before we load the image. Values range from 0 to 1.0. A value
            of 1 passed in as a threshold means the image is completely visible in the browser viewport. A value of 0.0
            means "any non-zero number of pixels". The Library's default is <code class="language-markup">0.006</code>
        </p>
        <pre class="language-markup"><code>&lt;script&gt;
  document.addEventListener("DOMContentLoaded", function () {
    new IOlazy({
       threshold: 0.8
    });
});
&lt;/script&gt;</code></pre>

        <p><b>Root Margin</b></p>
        <p>Margin added around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. Defaults to all zeros.</p>
        <pre class="language-markup"><code>&lt;script&gt;
  document.addEventListener("DOMContentLoaded", function () {
    new IOlazy({
       rootMargin: "50px 20px"
    });
});
&lt;/script&gt;</code></pre>

        <hr>
        <h3>Responsive Images</h3>
        <p>
            To lazyload your responsive images using srcset you'll need to prefix your srcset attribute with <code
                class="language-markup">data-srcset</code>
        </p>

        <pre class="language-markup"><code>&lt;img sizes="(min-width: 530px) 25vw, 100vw"
    data-srcset="your/image-177w.png 177w,
        your/image-240w.png 240w,
        your/image-321w.png 321w"

    src="your/low/quality/placeholder.png"
    alt="Your Alt Text"
    class="lazyload" &gt;</code></pre>


        <p>
            Your <code class="language-markup">src</code> attribute can be as shown above a low quality placeholder or a
            1px transparent gif.
        </p>
        <p>
            If you use a transparent gif or no src attribute you should provide a fallback for browsers that don't use
            javascript or for instances where the script fails or another script blocks the page.
        </p>
        <pre class="language-markup"><code>&lt;style&gt;
     /** add display none to the images with the lazyload class */
	.no-js img.lazyload {
        display: none;
    }
&lt;/style&gt;

&lt;noscript&gt;
	&lt;img src="your/image.png" /&gt;
&lt;/noscript&gt;

&lt;img sizes="(min-width: 530px) 25vw, 100vw"
    data-srcset="your/image-177w.png 177w,
        your/image-240w.png 240w,
        your/image-321w.png 321w"

    src="your/low/quality/placeholder.png"
    alt="Your Alt Text"
    class="lazyload" &gt;</code></pre>
        <hr>
        <h2 id="browser_support">
            <a href="#browser_support" class="page-nav">
            Browser Support
            </a>
        </h2>
        <p>
            The lazyload script itself uses <code class="language-javascript">classList</code> which is Internet Explorer 10+. If you have to support lower than that you'll need to use a polyfill (<a
                href="http://caniuse.com/#feat=classlist">found under 'resources' here</a>) or use the Polyfill service mentioned below under "polyfill".
        </p>
        <ul>
            <li>Internet Explorer 10+</li>
            <li>Internet Explorer Mobile 10+</li>
            <li>Safari and iOS Safari (chrome included) 6.1+</li>
            <li>Chrome, FireFox, Edge, Opera and all other "modern" browsers</li>
        </ul>
        <p>
            Intersection Observer is supported in these browsers without a polyfill
        </p>
        <!-- updated caniuse embed -->
        <p class="ciu_embed" data-feature="intersectionobserver" data-periods="future_1,current,past_1,past_2" data-accessible-colours="true">
            <picture>
                <source type="image/webp" srcset="https://caniuse.bitsofco.de/image/intersectionobserver.webp">
                <source type="image/png" srcset="https://caniuse.bitsofco.de/image/intersectionobserver.png">
                <img src="https://caniuse.bitsofco.de/image/intersectionobserver.jpg" alt="Data on support for the intersectionobserver feature across the major browsers from caniuse.com">
            </picture>
        </p>

        <p><b>PolyFill</b></p>
        <p>
            This demo uses <a href="https://polyfill.io/v2/docs/">PolyFill.io</a> to supply the polyfill. It's also
            noted above in the setup portion.
        </p>
        <p>
            If you don't want to use another third party there is a polyfill provided by the Web Incubator Community
            Group @ <a href="https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill">IntersectionObserver
            Polyfill</a>
        </p>
        <p>
            The polyfill supports all Firefox, Chrome, Edge, Safari 6+, Internet Explorer 7+. <a
                href="https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill#browser-support">Intersection
            Observer Polyfill Browser Support</a>
        </p>
        <h3>Source</h3>
        <ul>
            <li>
                <a href="https://github.com/cdowdy/io-lazyload">IOLazy Source</a>
            </li>
        </ul>
    </section>
    <section id="native" class="container column">
        <h2>
            <a href="#native" class="page-nav">Using Native lazy Load</a>
        </h2>
        <p>
            You can forgo using this library to lazy load images in the instance the the browser supports the <a
                href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading"> "loading" attribute</a>.
        </p>
        <p>
            You'll need to add the <code class="language-markup">loading</code> attribute to your each of your image tags in order for this to work properly.
        </p>


        <pre class="language-markup"><code>&lt;img sizes="(min-width: 530px) 25vw, 100vw"
    data-srcset="your/image-177w.png 177w,
        your/image-240w.png 240w,
        your/image-321w.png 321w"
    src="your/low/quality/placeholder.png"
    alt="Your Alt Text"
    class="lazyload"

    loading="lazy"
    &gt;</code></pre>

        <p>
            Once your images have the loading attribute we'll need to add a bit of javascript in your page, or your own javascript bundle/file. How you choose to do this is up to you!
        </p>
        <p>
            In this file we will query for all the images on our page, grab the <code class="language-markup">data-src</code> attribute and make that the <code class="language-markup">src</code> of our image tags. If your page contains responsive images with the "srcset" attribute you'll need to also grab those attributes and apply those as well.
        </p>
        <p>
            Example of using the native lazy loading instead of this library.
        </p>
        <pre class="language-markup"><code>&lt;script&gt;
  if ('loading' in HTMLImageElement.prototype) {
      // you could also use the class/id you use for the IOLazy library here for the images variable.
      const images = document.querySelectorAll("img");
      images.forEach(img => {
          img.src = img.dataset.src;
          //  this if clause is only needed if you have __ANY__ images with a srcset attribute.
          if (img.dataset.srcset) {
            img.srcset = img.dataset.srcset;
        }
      });
  }
&lt;/script&gt;
    </code></pre>
        <p>
            You'll need to make a decision here as to how you want to load the IOLazy library - in your bundle, a loader etc. Since there are multiple ways for this to happen I'll show you the dynamically imported version.
        </p>

        <pre class="language-markup"><code>&lt;script&gt;
  if ('loading' in HTMLImageElement.prototype) {
      const images = document.querySelectorAll("img");
      images.forEach(img => {
          img.src = img.dataset.src;
          if (img.dataset.srcset) {
            img.srcset = img.dataset.srcset;
        }
      });
  } else {
      let scriptEl = document.createElement('script');
      // set the scripts attribute to 'async'
      scriptEl.async = true;
      // set the src of the script element to the IOlazy javascript file.
      scriptEl.src = './path/to/iolazy.min.js';

     // append this newly created script element to the end of the body of our page.
     document.body.appendChild(scriptEl);
 }
&lt;/script&gt;
    </code></pre>

        <p>
            For a full example of using Native Lazyload see this <a href="NativeLazy.html">Using Native Lazyload with IOLazy</a> example page.
        </p>
    </section>
</main>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        new IOlazy();

        new IOlazy({
            image: '#nine',

            rootMargin: "50px 20px"
        });

        // for the css background image

        new IOlazy({
            image: '.lazyload-bg'
        });

    });
</script>
</body>
</html>