Origami Frontend Components & Services

Demos: o-lazy-load

o-lazy-load hasn't been branded yet, it only supports the core 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.

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: o-lazy-load@3.1.2

Install o-lazy-load

If using the Build Service, add o-lazy-load@^3.1.2 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.1.2".

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