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.

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

	<img class="o-lazy-load" 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" 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" 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" 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.

<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" 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" 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" 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" 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.

<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" 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" 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" 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" 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.

<div style="text-align: center;">
	<picture class="o-lazy-load">
		<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

<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>
Switch component view

GitHub Repository

Install o-lazy-load

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

If running a Manual Build, run bower install --save "o-lazy-load@^1.0.1".

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: #ft-origami
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: #ft-origami
Email: origami.support@ft.com