ngAsyncImg
An angular.js directive for asynchronous, $animate-aware image tags.
Installation
-
Install the
ngAsyncImg
packagevia NPM
npm install ng-async-img --saveor via BOWER
bower install ng-async-img --save
-
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
- Add a dependency to
ngAsyncImg
to your app
angular;
- Use the
async-img
directive in your markup
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 passedonLoad()
andonEnter()
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:
<!-- ... --><!-- ... -->
In your stylesheets:
/** * Fade-in asynchronously loaded images */
Markup after the <async-img>
has finished loading:
onLoad()
and onEnter()
callbacks (requires version >= 1.2.0)
Example: In your controller:
//...scope { // code}; scope { // code};
In your markup: