angular-imagesloaded
📷 ✅ AngularJS integration for the imagesloaded library.
Comments and Pull Requests welcome!
Contents
Installation
NPM
npm install angular-imagesloaded --save
Bower
bower install angular-imagesloaded --save
Manual
Dependencies
- Angular.js (^1.4.0)
- imagesloaded (^4.1.1)
Usage
Include bc.imagesloaded
as a dependency in your project:
angular;
bc-imagesloaded
Use this directive directly on an image as an attribute to create an imagesloaded instance for that specific image:
You can also pass in a selector string, NodeList or array to target multiple child elements:
bc-background
Set this attribute to true
to enable imagesloaded on the background of the current element:
You can also pass in a selector string to enable imagesloaded on multiple child elements:
'bc-debug'
When this attribute is set to true
, imagesloaded will output debug logs to the console.
Events
Events can help ....
Always
Triggered after all images have been either loaded or confirmed broken.
Available Parameters:
Param | Type | Details |
---|---|---|
instance |
Object | The imagesLoaded instance |
{} // This method will be called after all images are either loaded or confirmed broken { console }
Done
Triggered after all images have successfully loaded without any broken images.
Available Parameters:
Param | Type | Details |
---|---|---|
instance |
Object | The imagesLoaded instance |
{} // This method will be called after all images have loaded successfully { console }
Fail
Triggered after all images have been loaded with at least one broken image.
Available Parameters:
Param | Type | Details |
---|---|---|
instance |
Object | The imagesLoaded instance |
{} // This method will be called after all images have loaded and at least one is broken { console }
Progress
Triggered after each image has been loaded.
Available Parameters:
Param | Type | Details |
---|---|---|
instance |
Object | The imagesLoaded instance |
image |
Object | The LoadingImage instance of the loaded image |
{} // This method will be called after EACH image is loaded { console }
Development
npm run build
- Build JSnpm run watch
- Watch JS and rebuild on changenpm run test
- Run testsnpm run watch:tests
- Watch test files and re-run tests on change
About imagesloaded
JavaScript is all like "You images done yet or what?"
Created by David DeSandro.