Lazymage

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.