Demos: o-lazy-load

o-lazy-load hasn't been branded yet, it only supports the master brand. If you would like to discuss having it branded please get in touch with the Origami team.

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 running a Manual Build, run npm install "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