Contao CMS Lazy loading

Lazy images loading for Contao CMS 3

Today all modern browsers support loading images in Browser-level lazy loading.

Definition

Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed. It can contribute to efficiency in the program's operation if properly and appropriately used. The opposite of lazy loading is eager loading. (Wiki)

Contao supported versions

Extension was developed for Contao 3 and Contao CMS version 4.

Extension source code is available on Github.

Supported options

Lazyloading images with LazySizes.js without the disturbing reflow of the website, whenever an image is loaded.

Several options are available in the generic contao settings:

  • Transparent placeholder
  • Thumbnail placeholder
  • Intrinsic ratio (no placeholder needed)
  • Intrinsic ratio + thumbnail placeholder
Lazy loading 2016
Lazy Images module for Contao Open Source CMS, 2016.
Acknowledgments

Concept and initiative for extension Derhäuptling. Extension development Mediar.