ngAsyncImg

An angular.js directive for asynchronous, $animate-aware image tags.

Installation

1. Install the ngAsyncImg package

   via NPM

   npm install ng-async-img --save

   or via BOWER

   bower install ng-async-img --save
   

2. Include the library into your application:

   if installed via NPM include from node_modules

   <script src="/node_modules/ng-async-img/lib/ng-async-img.min.js"></script>

   if installed via Bower include from bower_components

   <script src="/bower_components/ng-async-img/lib/ng-async-img.min.js"></script>

Usage

1. Add a dependency to ngAsyncImg to your app

angular.module('myApp', ['ngAsyncImg']);

1. Use the async-img directive in your markup

<async-img src="/path/to/your/img.png"></async-img>

Features

• The image will then be loaded asynchronously and the <async-img>-tag replaced by a regular <img>-tag when the image has loaded. This is done via $animate.enter() which enables CSS-animation via .ng-enter.

• As of version 1.2.0 <async-img> can be passed onLoad() and onEnter() callback functions.

• The <async-img> will retain all attributes of the initial <async-img> and have the .async-img class.

Example: CSS animation to fade in async images

In your markup:

<!-- ... -->
<async-img src="/path/to/your/img.png"
  class="some-class"
  an-attribute="1"></async>
<!-- ... -->

In your stylesheets:

/**
 * Fade-in asynchronously loaded images
 */
.async-img {
  transition: opacity 0.4s ease-in-out;
}
 
.async-img.ng-enter {
  opacity: 0;
}
 
.async-img.ng-enter-active {
  opacity: 1;
}
 
.async-img.ng-enter-prepare {
  opacity: 0;
}

Markup after the <async-img> has finished loading:

<img src="/path/to/your/img.png"
  class="some-class async-img"
  an-attribute="1" />

Example: onLoad() and onEnter() callbacks (requires version >= 1.2.0)

In your controller:

//...
scope.onAsyncImgLoad = function() {
  // code
};
 
scope.onAsyncImgEnter = function() {
  // code
};

In your markup:

<async-img src="/path/to/your/img.png"
  on-load="onAsyncImgLoad()"
  on-enter="onAsyncImgEnter()"></async-img>

Changelog

License