Currently, I am implementing a simple image preloading technique using promises. This function is integrated into a larger Angular (1.3.15) custom directive.
Here is the JavaScript code snippet:
function preLoad() {
var deferred = $q.defer();
var imageArray = [];
for (var i = 0; i < $scope.abbreviations.length; i++) {
imageArray[i] = new Image();
imageArray[i].src = $scope.abbreviations.imgPath;
//logging
console.log(imageArray[i]);
console.log(imageArray[i].src);
console.log($scope.abbreviations);
console.log($scope.abbreviations.imgPath);
}
imageArray.forEach.onload = function () {
deferred.resolve();
console.log('Resolved');
}
imageArray.forEach.onerror = function () {
deferred.reject();
console.log('Rejected')
}
return deferred.promise;
}
The format of abbreviations is as follows:
abbreviations: [
{
name: 'a<sup>o</sup>',
tag: 'anno',
imgPath: 'images/keypad/anno.png'
},
{
name: 'esq.',
tag: 'esquire',
imgPath: 'images/keypad/esquire.png'
},
{
name: 'ex<sup>t</sup>, exaite',
tag: 'examinant',
imgPath: 'images/keypad/examinant.png'
}
]
This is what appears in the Chrome console logs:
https://i.sstatic.net/VL4ll.png
Upon examining the code, it seems that all objects are accessible under $scope.abbreviations, yet the imgPath property returns as undefined.
Hence the confusion about why $scope.abbreviations.imgPath remains undefined.