Package Exports

angular-easy-image-preloader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (angular-easy-image-preloader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.
});

angular-easy-image-preloader