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

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.

• .afkl-img-ratio-4-2
• .afkl-img-ratio-16-9
• .afkl-img-ratio-3-2
• .afkl-img-ratio-4-3

• .afkl-img-ratio-3-4
• .afkl-img-ratio-1-1

Check profiling

Destroy $scope (no leaks)

Examples using the provided options

• option: alt, className
• option: not lazy, own offset
• option: background image
• option: single image for all viewports
• Inside scrollable directive, afkl-image-container

Specific usecases

• Done or Fail event for every image directive
• Directive inside repeat with filtering
• Change at runtime
• Image top row
• Toggle parent view (css animations or ng-if)

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