Angular lazy image directive

Directive for loading responsive image when container (which is preventing reflow) is in viewport. Available as a bower and npm component. This module was made while working on the KLM travel inspiration finder as a test to contribute to Open Source, see Github for our source. We would like to thank Sandra Maas for making this possible. Resize, reload and scroll to see what gets actually loaded and when. Below you will find more examples.


Example showing another aspect ratio. The parent container always sets the max width available for the image to align.

Option to use aspect ratio's

Browser reflow is bad, especially when lazy loading images. The container aspect ratio setup sets the correct image container height (so no total repainting takes place when image is appended) based on it's css class which uses aspect-ratio. If you want different aspect ratio's for different srcset setup then introduce your own classnames.

Check profiling

Examples using the provided options

Specific usecases

Shout our for our Eden devops team: Martijn, Joel and Ramon.