This package has been deprecated

    Author message:

    Package no longer maintained. Use at your own risk.

    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

    0

    Version

    1.3.0

    License

    GPL-3.0

    Last publish

    Collaborators

    • haensl