angular-images-loaded-jtt v1.0.0
angular-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
You can nest the directive
Eg.
``` html
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
$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
$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 -
<div data-images-loaded data-use-progress-events="yes">
<div data-ng-repeat="image in images">
<img ng-src="http://lorempixel.com/{{image.src}}"/>
<div>Foo Bar</div>
</div>
</div>
- data-use-progress-events="yes" to listen to progress events
- data-use-progress-events="no" to skip progress events and just listen to main eventsThis 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.
$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;
}
});
8 years ago