var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, images) {
$scope.state = 'loading';
images.load(['https://hoshi.imgix.net/amyzaroff/uploads/pages/1/mjhlqgqvn/JessieEliWed431.jpg?w=3000&h=3000'])
.then(function(){
$scope.state = 'Images loaded';
});
});
app.factory('images', ['$q', function($q) {
return {
load: function(urls) {
if (!(urls instanceof Array))
return $q.reject('Input is not an array');
var promises = [];
for (var i = 0; i < urls.length; i++) {
var deferred = $q.defer();
var img = new Image();
img.onload = (function(deferred) {
return function(){
deferred.resolve();
}
})(deferred);
img.onerror = (function(deferred,url) {
return function(){
deferred.reject(url);
}
})(deferred,urls[i]);
promises.push(deferred.promise);
img.src = urls[i];
}
return $q.all(promises);
}
}
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>{{state}}!</p>
</body>
</html>
/* Put your css in here */