Почему загрузка не выполняется, и поэтому обещания не решены?

Question

Этот фрагмент является частью более крупной директивы:

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

и этот скриншот показывает журналы в моей консоли:

Вопрос: почему функция загрузки не удается, и, как следствие, обещания не решены?

Answer 1

Проблема здесь:

imageArray.forEach(function(src) { 
    ... 
} 

Проходите в forEach обратного вызова элемент imageArray - но это уже объект изображения. Поэтому, когда вы назначаете его в src нового изображения, загрузка не выполняется.

Простейшее решение будет пропускать этот цикл в начале вашего кода и активировать обратный вызов forEach, чтобы он работал с исходным объектом. Фактически, чище использовать .map с возвратом результата:

promises = $scope.abbreviations.map(function(imgObj) { 
    return loadImage(imgObj.imgPath); 
});