Here is a snippet of code that is part of a larger directive:
var imageArray = [];
for (var i = 0; i < $scope.abbreviations.length; i++) {
imageArray[i] = new Image();
imageArray[i].src = $scope.abbreviations[i].imgPath;
};
console.log(imageArray);
function preLoad() {
var promises = [];
function loadImage(src) {
return $q(function (resolve, reject) {
var image = new Image();
image.src = src;
image.onload = function () {
resolve(image);
console.log('onload:', src);
};
image.onerror = function (e) {
reject(e);
console.log('onerror:', e);
};
})
}
imageArray.forEach(function (src) {
console.log('forEach:', src);
promises.push(loadImage(src));
});
return $q.all(promises).then(function (results) {
console.log('Promises resolved with', results);
$scope.results = results;
});
}
preLoad().then(function () {
console.log('Ready for next activity...');
This screenshot displays the logs from my console:
https://i.sstatic.net/uQJxL.png
Question: Why is the loading function failing and why aren't the promises being resolved as expected?