angular-lazy-image

Loading responsive and adaptive image when container (which is also preventing reflow) is in view. Loading feedback to enduser. Works also as background image.
4 people use it
Author: 7985714?v=2 afklm
Submitted by: 5846452?v=2 SquadraCorse

This directive shows correct image using the srcset setup for an image. It will respond to resizing and scrolling. When the container is not in view the image will not load. The container setup is using a trick to prevent browser reflow while actually painting the image when needed. Options like 'offset' can be overruled. Also works on resize.

Demo

Demonstration

Usage

  1. bower install afkl-lazy-image -p
  2. Add a dependency on afkl.lazyImage in your app module.
  3. See the style.css for some classes you can use (will add more aspect ratio's later)

Directive in html template

<div afkl-lazy-image="//placehold.it/480x480 480w, //placehold.it/768x768 768w, //placehold.it/936x936" class="afkl-lazy-wrapper afkl-img-ratio-1-1"></div>

or

<div afkl-lazy-image="//placehold.it/480x200/00a1de/ffffff 480w, //placehold.it/768x200/00a1de/ffffff 768w" class="demo-background-image" afkl-lazy-image-options='{"background": true}'>Sample</div>

The attributes are using the srcset setup. Your window will determine which image fits best (so the rules are very dynamic). The image will only be set when the parent container is in the viewport (lazy loading). You can set the offset as option and also if you want to load a background-image instead of an image.

Options

  • "afkl-lazy-image": srcset string (required)
  • "afkl-lazy-image-options": (optional)
    • '{"background": true}' this will set correct background image on container
    • '{"offset": 200}' by default offset is 50px, this will influence when to start loading the image
  • "class" : afkl-lazy-wrapper will use height 0 trick, afkl-img-ratio-1-1 sets correct aspect ratio (optional, include css)
comments powered by Disqus
This page was last updated over 2 years ago.