lazymage

Angular directive to display images or loaders while images are loading


Keywords
lazyload, angular, directive, images
License
MIT
Install
bower install lazymage

Documentation

Lazymage

Build Status

Angular directive to show a default image/loader while an image is loading. You can also add a default image if an error occured.

You can see the demo.

Installation

Include the script:

<script src="path/to/script/lazymage/dist/lazymage.min.js"></script>

Directives Usage

This package provides a lazymage module which you'll need to add as a dependency to your app, i.e.

angular.module('myApp', ['lazymage']);

Lazymage

<div lazymage="{{item.image}}"></div>

or

<div lazymage="http://example.com/image.jpg"></div>

Options

You can pass initialization parameters to the Lazymage constructor:

angular.module('myApp', ['lazymage'])
  .config(function(lazymageRemoteProvider) {
    lazymageRemoteProvider.globalOptions.loader = false;
    // or
    lazymageRemoteProvider.globalOptions = {
      loader: false,
      // ... others options
    }
  })

An example of full configuration:

lazymageRemoteProvider.globalOptions =  {
    currentImage: {
      attrs: {
        class: 'img-responsive',
        custom_property: 'value'
      }
    },
    errorImage: {
      src: null,
      attrs: {}
    },
    defaultImage: {
      src: 'path/to/image',
      attrs: {},
      removeTimeout: 0
    },
    loader: {
      html: '<span>Loading...</span>',
      removeTimeout: 0
    }
};

You can also use the lazymage-options attribute on the same element with the lazymage directive.

In your controller:

$scope.lazymageOptions = {
  loader: {
    html: '<span>This loader overrides others</span>',
    removeTimeout: 0
  }
};

In your view:

<div lazymage="{{item.image}}" lazymage-options="lazymageOptions"></div>

Author

Thibault PIERRE - @T1l3 http://thibaultpierre.com

License MIT.