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 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&fit=scale-down&compression=best&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&fit=scale-down&compression=best&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&fit=scale-down&compression=best&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&fit=scale-down&compression=best&width=500" alt>
</div>
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 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&fit=scale-down&compression=best&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&fit=scale-down&compression=best&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&fit=scale-down&compression=best&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&fit=scale-down&compression=best&width=500" alt>
</div>
</div>
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 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&fit=scale-down&compression=best&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&fit=scale-down&compression=best&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&fit=scale-down&compression=best&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&fit=scale-down&compression=best&width=500" alt data-toggle-class="demo-fancy-load">
</div>
</div>
A more advanced implementation demonstrating how to load picture elements.
<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&fit=scale-down&quality=highest&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&fit=scale-down&quality=highest&width=800" alt>
</picture>
</div>
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 →</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>