Angular lazy image directive

Loading responsive image when container (which is preventing reflow) is in view.

See Github for source.

Example

Resize, reload and scroll to see what gets actually loaded and when.

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

Create your own adaptive image rules

Aspect ratio's

Browser reflow is bad, especially when lazy loading images. The container aspect ratio setup sets the correct image container when DOM is presented which doesn't make your site jumping. If you want different aspect ratio's for different srcset setup then introduce your own classnames.