Lazy

This filter will swap out the src attribute of any <img> tags with a 1x1 px, base64 encoded SVG, retaining the original image's aspect ratio. The original source will be put in a data attribute called original, and the class lazy will be applied. This makes it easy to implement lazy loading, even for images embedded in Redactor fields.

Note that Retcon does not queue up any JavaScript; you're free to use whatever you want for the actual lazy loading.

Usage

Without parameters (default options)

{{ entry.body | retconLazy }}

With custom class and data attribute names

{{ entry.body | retconLazy( 'img', 'myLazyClass', 'orgsrc' ) }}

Parameters

@selector string|string[]
String value or array of string values. Optional, default "img"

@className string Optional, default "lazy"

@attributeName string
Optional, default "original"

Gotchas

Make sure to apply the lazy filter after transform if you're using both.

Native lazy loading

⚠️ Don't use the lazy filter if you want to implement native lazy loading – for that, all you need is the attr filter; i.e. something like this:

{{ entry.body | retconAttr('img', { loading: 'lazy' }) }}

Resources

https://github.com/aFarkas/lazysizes
http://www.appelsiini.net/projects/lazyload