Demos: o-lazy-load

This version of o-lazy-load hasn't been branded yet. Please check the latest version, 3.0.0, as branding is a relatively new addition to our components.

Lazy loading images

A basic implementation of loading images when they move into the viewport.

Demo
HTML

Open demo in a new tab

<div class="demo-container" style="text-align: center">
  <br style="margin-bottom: 20em" />

  <img
    class="o-lazy-load o-lazy-load--transition"
    data-src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F30ae5186-9f88-11e8-b196-da9d6c239ca8?source=next&amp;fit=scale-down&amp;compression=best&amp;width=500"
    alt
  />

  <br style="margin-bottom: 20em" />

  <img
    class="o-lazy-load o-lazy-load--transition"
    data-src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F39f63a86-9738-11e8-95f8-8640db9060a7?source=next&amp;fit=scale-down&amp;compression=best&amp;width=500"
    alt
  />

  <br style="margin-bottom: 20em" />

  <img
    class="o-lazy-load o-lazy-load--transition"
    data-src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F2dc6d18e-9eeb-11e8-85da-eeb7a9ce36e4?source=next&amp;fit=scale-down&amp;compression=best&amp;width=500"
    alt
  />

  <br style="margin-bottom: 20em" />

  <img
    class="o-lazy-load o-lazy-load--transition"
    data-src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F25de4598-9c88-11e8-88de-49c908b1f264?source=next&amp;fit=scale-down&amp;compression=best&amp;width=500"
    alt
  />
</div>

Content Placeholders

Using a placeholder to preserve a fixed aspect ratio space for content to load into.

Demo
HTML

Open demo in a new tab

<div class="demo-container" style="text-align: center">
  <br style="margin-bottom: 20em" />

  <div class="o-lazy-load-placeholder o-lazy-load-placeholder--16x9">
    <img
      class="o-lazy-load o-lazy-load--transition"
      data-src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F30ae5186-9f88-11e8-b196-da9d6c239ca8?source=next&amp;fit=scale-down&amp;compression=best&amp;width=500"
      alt
    />
  </div>

  <br style="margin-bottom: 20em" />

  <div class="o-lazy-load-placeholder o-lazy-load-placeholder--16x9">
    <img
      class="o-lazy-load o-lazy-load--transition"
      data-src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F39f63a86-9738-11e8-95f8-8640db9060a7?source=next&amp;fit=scale-down&amp;compression=best&amp;width=500"
      alt
    />
  </div>

  <br style="margin-bottom: 20em" />

  <div class="o-lazy-load-placeholder o-lazy-load-placeholder--16x9">
    <img
      class="o-lazy-load o-lazy-load--transition"
      data-src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F2dc6d18e-9eeb-11e8-85da-eeb7a9ce36e4?source=next&amp;fit=scale-down&amp;compression=best&amp;width=500"
      alt
    />
  </div>

  <br style="margin-bottom: 20em" />

  <div class="o-lazy-load-placeholder">
    <!-- custom placeholder sizing -->
    <div style="padding-bottom: 56.25%"></div>
    <img
      class="o-lazy-load o-lazy-load--transition"
      data-src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F25de4598-9c88-11e8-88de-49c908b1f264?source=next&amp;fit=scale-down&amp;compression=best&amp;width=500"
      alt
    />
  </div>
</div>

Class name toggle

Implementing a class name toggle to add a jazzy loading animation.

Demo
HTML

Open demo in a new tab

<div class="demo-container" style="text-align: center">
  <br style="margin-bottom: 20em" />

  <div class="o-lazy-load-placeholder o-lazy-load-placeholder--16x9">
    <img
      class="o-lazy-load o-lazy-load--transition"
      data-src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F30ae5186-9f88-11e8-b196-da9d6c239ca8?source=next&amp;fit=scale-down&amp;compression=best&amp;width=500"
      alt
      data-toggle-class="demo-fancy-load"
    />
  </div>

  <br style="margin-bottom: 20em" />

  <div class="o-lazy-load-placeholder o-lazy-load-placeholder--16x9">
    <img
      class="o-lazy-load o-lazy-load--transition"
      data-src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F39f63a86-9738-11e8-95f8-8640db9060a7?source=next&amp;fit=scale-down&amp;compression=best&amp;width=500"
      alt
      data-toggle-class="demo-fancy-load"
    />
  </div>

  <br style="margin-bottom: 20em" />

  <div class="o-lazy-load-placeholder o-lazy-load-placeholder--16x9">
    <img
      class="o-lazy-load o-lazy-load--transition"
      data-src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F2dc6d18e-9eeb-11e8-85da-eeb7a9ce36e4?source=next&amp;fit=scale-down&amp;compression=best&amp;width=500"
      alt
      data-toggle-class="demo-fancy-load"
    />
  </div>

  <br style="margin-bottom: 20em" />

  <div class="o-lazy-load-placeholder">
    <!-- custom placeholder sizing -->
    <div style="padding-bottom: 56.25%"></div>
    <img
      class="o-lazy-load o-lazy-load--transition"
      data-src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F25de4598-9c88-11e8-88de-49c908b1f264?source=next&amp;fit=scale-down&amp;compression=best&amp;width=500"
      alt
      data-toggle-class="demo-fancy-load"
    />
  </div>
</div>

Lazy loading picture elements

A more advanced implementation demonstrating how to load picture elements.

Demo
HTML

Open demo in a new tab

<div style="text-align: center">
  <picture class="o-lazy-load o-lazy-load--transition">
    <source
      data-srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fcom.ft.imagepublish.upp-prod-eu.s3.amazonaws.com%2F368bf606-9c88-11e8-9702-5946bae86e6d?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=480"
      media="screen and (max-width: 480px)"
    />
    <img
      data-srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fcom.ft.imagepublish.upp-prod-eu.s3.amazonaws.com%2F977b6b38-9cbd-11e8-9702-5946bae86e6d?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=800"
      alt
    />
  </picture>
</div>

Declarative configuration

This demo toggles a class name when a square moves fully into view

Demo
HTML

Open demo in a new tab

<div class="demo-container" style="text-align: center">
  <p>
    Scroll to see each square turn purple when moved fully into view &#x2192;
  </p>
  <div
    class="demo-scrollable"
    data-o-component="o-lazy-load"
    data-o-lazy-load-threshold="1"
    data-o-lazy-load-selector=".demo-target"
  >
    <div class="demo-target" data-toggle-class="loaded"></div>
    <div class="demo-target" data-toggle-class="loaded"></div>
    <div class="demo-target" data-toggle-class="loaded"></div>
    <div class="demo-target" data-toggle-class="loaded"></div>
    <div class="demo-target" data-toggle-class="loaded"></div>
    <div class="demo-target" data-toggle-class="loaded"></div>
    <div class="demo-target" data-toggle-class="loaded"></div>
    <div class="demo-target" data-toggle-class="loaded"></div>
    <div class="demo-target" data-toggle-class="loaded"></div>
    <div class="demo-target" data-toggle-class="loaded"></div>
  </div>
</div>

Status

GitHub Repository

Install o-lazy-load

If using the Build Service, add o-lazy-load@^2.0.7 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-lazy-load@^2.0.7".

Help & Support

o-lazy-load is maintained directly by the Origami team. If you have any questions about o-lazy-load or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com