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.