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.
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.
Shout our for our Eden devops team: Martijn, Joel and Ramon.