Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

DEPRECATED: ngAsyncImg

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

Deprecation notice

Due to the end of life of Angular.js, this module is deprecated and no longer maintained.

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