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的元素 - 但该已经一个Image对象。这就是为什么当你将它分配到一个新的Image的src时，加载失败。

最简单的解决方案是在代码的开头跳过该循环，并增加forEach回调，以便它可以与原始对象一起使用。事实上，使用.map返回结果更简洁：

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

为什么加载失败，因此承诺无法解决？

1 个答案: