Skip to content
An angular.js directive for asynchronous, $animate-aware image tags.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
src
.eslintrc.json
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
Gulpfile.js
LICENSE
README.md
bower.json
karma.conf.js
package.json

README.md

ngAsyncImg

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

NPM

npm version Bower version Build Status

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

You can’t perform that action at this time.