Origami Frontend Components & Services

Demos: o-lazy-load

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

Content Placeholders

Using a placeholder to preserve a fixed aspect ratio space for content to load into.

Class name toggle

Implementing a class name toggle to add a jazzy loading animation.

Lazy loading picture elements

A more advanced implementation demonstrating how to load picture elements.

Declarative configuration

This demo toggles a class name when a square moves fully into view

Switch component view

GitHub Repository

Install o-lazy-load

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

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-lazy-load@^3.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: #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