Open primary navigation
Origami Frontend Components & Services

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.

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.

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.

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.

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

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
active Origami v1
Switch component view

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