Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ng-async-img with all npm packages installed. Try it out:

var ngAsyncImg = require("ng-async-img")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ng-async-img v1.0.4

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

ngAsyncImg

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

NPM

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>

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.

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" />

Changelog

License

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free