Responsive Lazyload Examples

All photos by paint with stars photography.

Basic usage.

The simplest usage is almost plain ol’ markup you’d use anyways.

<div class="js--lazyload">
  <img alt="image description"
       src="images/example@2x.jpg"
       srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
       data-lazyload="images/example-300x150.jpg 300w,
                      images/example-600x300.jpg 600w,
                      images/example.jpg 690w,
                      images/example@2x.jpg 1380w">
</div>

The key differences are:

• The img tag is placed inside a wrapper with the js--lazyload classes.
• The srcset attribute is set to a blank GIF (base-64 encoded to eliminate an extra request per image).
• The images that we want used for srcset are instead placed in the data-lazyload attribute.

To enable lazyloading, include the following snippet just before your closing </body> tag:

<script src="path/to/bower_components/responsive-lazyload/dist/responsive-lazyload.min.js"></script>
<script>
  responsiveLazyload();
</script>

Use with figure elements and other wrappers.

The responsive image markup can be included inside other elements (e.g. figure) without issue. It does require an extra tag, unfortunately.

<figure>
  <div class="js--lazyload">
    <img alt="image description"
         src="images/example02@2x.jpg"
         srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
         data-lazyload="images/example02-300x150.jpg 300w,
                        images/example02-600x300.jpg 600w,
                        images/example02.jpg 690w,
                        images/example02@2x.jpg 1380w">
  </div>
  <figcaption>
    You can also include lazyloaded images in <code>figure</code> elements.
  </figcaption>
</figure>

How to Handle Different Aspect Ratios

By default, responsiveLazyload.js sets images to a 2:1 aspect ratio (padding-bottom: 50%; — figure this out by dividing the height by the width, e.g. 400h ÷ 800w = 0.5).

To change the aspect ratio to match your image, divide the height by the width and add an inline style to the wrapper:

<div class="js--lazyload"
     style="padding-bottom: 66.67%">
  <img alt="image description"
       src="images/example03@2x.jpg"
       srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
       data-lazyload="images/example03-300w.jpg 300w,
                      images/example03-600w.jpg 600w,
                      images/example03.jpg 690w,
                      images/example03@2x.jpg 1380w">
</div>

Images With Unknown Sizes

To avoid setting explicit sizes, the lazyload class can be applied directly to the img tag.

<img alt="image description"
     class="js--lazyload"
     src="images/example04@2x.jpg"
     srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
     data-lazyload="images/example04-300x150.jpg 300w,
                    images/example04-600x300.jpg 600w,
                    images/example04.jpg 690w,
                    images/example04@2x.jpg 1380w">

NOTE: This approach causes the content to reflow (unless the image is square) and may cause layout issues since it tries to set the image at 100% of its container width. Use at your own discretion.

Images That Become Visible From JavaScript Actions

In some cases, an image may be within the viewport, but not actually be visible (e.g. tabbed interfaces). Not to worry — we’ve handled that as well!

To make this happen, pass a callback to the JS function that shows or hides elements that is the return value from responsiveLazyload():

<script>
    /*
     * The initialization returns a function that we can call
     * to force a check for new images. This is useful when
     * images are shown/hidden by JavaScript.
     */
    var loadVisibleImages = responsiveLazyload();

    // THIS JS FOR THE DEMO ONLY
    window.initTabs({
      /*
       * Whenever a tab changes, check for new images and
       * lazy load them if necessary.
       */
      onChange: loadVisibleImages,
    });
</script>