Responsive Lazyload Examples

All photos by paint with stars photography.

Basic usage.

image description

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

<div class="js--lazyload">
  <img alt="image description"
       data-lazyload="images/example-300x150.jpg 300w,
                      images/example-600x300.jpg 600w,
                      images/example.jpg 690w,
                      images/example@2x.jpg 1380w">

The key differences are:

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>

Use with figure elements and other wrappers.

image description
You can also include lazyloaded images in figure elements.

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

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

How to Handle Different Aspect Ratios

image description

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"
       data-lazyload="images/example03-300w.jpg 300w,
                      images/example03-600w.jpg 600w,
                      images/example03.jpg 690w,
                      images/example03@2x.jpg 1380w">

Images With Unknown Sizes

image description

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

<img alt="image description"
     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():

     * 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();

       * Whenever a tab changes, check for new images and
       * lazy load them if necessary.
      onChange: loadVisibleImages,
Fork me on GitHub