Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

ng-async-img

1.3.0 • Public • Published

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

install

npm i ng-async-img

Downloadsweekly downloads

47

version

1.3.0

license

GPL-3.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability