Origami Frontend Components & Services

Demos: o-lazy-load

This version of o-lazy-load hasn't been branded yet. Please check the latest version, 1.0.2, 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.

<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