angular-images-loaded-jtt
v1.0.0
Image load detector
0/weekUpdated 3 years agoMIT
Published by Jonathan Hornung
npm install angular-images-loaded-jttangular-images-loaded
---------------------
####Image load detector with progress events
+ Directive can be nested now (NEW)
+ Detects images load for all images inside an element and broadcasts angular progress events
+ Works with ng-repeat.
+ Can be used on different elements
+ Need not worry about asynchronous image elements insertion into DOM
#####REQUIREMENTS
+ Angularjs 1.2+ only
#####INSTALLATION
+ Download angular-images-loaded-directive.min.js and include it with your JS files.
+ Include module jtt_imagesLoaded in your main app module.
#####USAGE
+ Put directive data-images-loaded on an element containing images.
Eg.
`` html`
Foo Bar
+ You can nest the directive
Eg.
` html`
..................
Foo Bar
Foo Bar
That's it!
#####EVENTS(Always available)
+ imagesLoaded.SUCCESS - All images have been successfully loaded
+ imagesLoaded.FAIL - All images have been loaded with atleast 1 failed image
+ imagesLoaded.ALWAYS - All images are done, whether successfully loaded or failed to load. This event is always broadcasted
Subscribe to these events in your controller as shown below
` js
$scope.$on('imagesLoaded.SUCCESS', function() {
console.log('ALL LOADED');
});
$scope.$on('imagesLoaded.FAIL', function() {
console.log('ALL LOADED WITH ATLEAST ONE FAILED');
});
$scope.$on('imagesLoaded.ALWAYS', function() {
console.log('ALL DONE ALWAYS');
});
`
#####PROGRESS EVENTS
+ imagesLoaded.QUARTER - One fourth of total images have been loaded/failed
+ imagesLoaded.HALF - Half of total images have been loaded/failed
+ imagesLoaded.THREEQUARTERS - Three fourth of total images have been loaded/failed
+ imagesLoaded.FULL - All images have been loaded/failed
Main event is imagesLoaded.PROGRESS, other events are received in the callback via progress.status
Subscribe to these progress events in your controller as shown below
` js`
$scope.$on('imagesLoaded.PROGRESS', function($event, progress) {
console.log(progress);
switch(progress.status) {
case 'imagesLoaded.QUARTER':
$scope.progress = 25;
break;
case 'imagesLoaded.HALF':
$scope.progress = 50;
break;
case 'imagesLoaded.THREEQUARTERS':
$scope.progress = 75;
break;
case 'imagesLoaded.FULL':
$scope.progress = 100;
break;
}
});
#####Note :-
1) To listen to progress events, use attribute data-use-progress-events as shown below -
`html`
Foo Bar
+ data-use-progress-events="yes" to listen to progress events
+ data-use-progress-events="no" to skip progress events and just listen to main events
This approach is taken to minimise $digest cycles in case you wish to skip progress events, since all angular-specific changes take place in the $digest cycle. That's why, I have kept progress events to a minimum, otherwise N images load will cause N $digest cycles to notify the subscriber, which can hamper performance.
2) Use $event.stopPropagation() in your controller when using progress events and nesting the directive, otherwise you'll receive same notification multiple times.
` js``
$scope.$on('imagesLoaded.PROGRESS', function($event, progress) {
console.log(progress);
$event.stopPropagation();
switch(progress.status) {
case 'imagesLoaded.QUARTER':
$scope.progress = 25;
break;
case 'imagesLoaded.HALF':
$scope.progress = 50;
break;
case 'imagesLoaded.THREEQUARTERS':
$scope.progress = 75;
break;
case 'imagesLoaded.FULL':
$scope.progress = 100;
break;
}
});