1.2.0 • Published 7 years ago
angular-easy-image-preloader v1.2.0
Angular JS Easy Image Preloader
Inspired heavily by this blog post. Credit for preloader code goes to Ben Nadel.
Step 1:
Install angular-easy-image-preloader via NPM
npm install angular-easy-image-preloader --save
Step 2:
Load script in your main view
<script src="node_modules/angular-easy-image-preloader/dist/preloader.min.js"></script>
Step 3:
Include the preloader app in your app:
angular.module('example', ['angular-easy-image-preloader']);
Step 4:
Include the preloader service in your controller:
app.controller('MyController', function($scope, preloader) {}
Step 5:
Pass in an array of images for the preloader:
$scope.imageLocations = [
"img/one.png",
"img/two.png",
"img/three.png",
...
];
Step 6:
Call the preloader.preloadImages function, passing in your array of images:
preloader.preloadImages( $scope.imageLocations )
preloader.preloadImages returns a promise, so you could also handle the promise like so:
preloader.preloadImages( $scope.imageLocations )
.then(function() {
// Loading was successful.
},
function() {
// Loading failed on at least one image.
});