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.
