使用Javascript预加载图像

我想预加载一些图像。下面是我正试图适应我的需要的代码

function preLoadImages(callback) {
    var count = 0;
    var loadNext = function () {
        var pic = new Image();
        pic.onload = function () {
            $scope.imagesToLoad[count].image = pic;
            count++;
            if (count >= $scope.imagesToLoad.length) {
                callback();
            } else {
                loadNext();
            }
        }
        pic.src = '<img src=\'assets' + $scope.imagesToLoad[count].Name1 + "_" +
            $scope.imagesToLoad[count].Name2 + "_" + $scope.imagesToLoad[count].Name3 + '.png\'/>';
    }
    loadNext();
};

函数预加载图像（回调）{
var计数=0；
var loadNext=函数（）{
var pic=新图像（）；
pic.onload=函数（）{
$scope.imagesToLoad[count].image=pic；
计数++；
如果（计数>=$scope.imagesToLoad.length）{
回调（）；
}否则{
loadNext（）；
}
}
pic.src=''；
}
loadNext（）；
};

我的期望是，当设置了

pic.src

时，我将进入onload函数并继续加载我的图像。但我并没有进入超载状态。所以，我的问题是，当我们设置src时，我们真的触发了图像加载吗

感谢From的评论，我意识到您以前的函数按顺序加载图像，这意味着只有在加载前一个图像时，下一个图像才会开始加载。然而，在您的问题中，您似乎希望在上一个图像启动后立即开始下一个图像加载

因此，如果要启动所有图像的加载过程，可以编写如下代码：

function preLoadImages(callback) {
  var imagesToLoadCount = $scope.imagesToLoad.length;

  var loadImage = function(index) {
    var pic = new Image();
    pic.onload = function() {
      $scope.imagesToLoad[index].image = pic;
      --imagesToLoadCount;
      if (imagesToLoadCount === 0) {
        // This will be called when all images complete loading,
        callback();
      }
    };
    pic.onerror = function() {
      // Fail Handle here.
      --imagesToLoadCount;
      if (imagesToLoadCount === 0) {
        // This will be called when all images complete loading,
        callback();
      }
    };
    pic.src = 'assets' + $scope.imagesToLoad[index].Name1 + "_" +
      $scope.imagesToLoad[index].Name2 + "_" + $scope.imagesToLoad[index].Name3 + '.png';
  };

  // Start to load all images.
  for (var i = 0; i < imagesToLoadCount; ++i) {
    loadImage(i);
  }

  // Your previous callback is likely to be called here, is it what you want?
};

函数预加载图像（回调）{
var imagesToLoadCount=$scope.imagesToLoad.length；
var loadImage=函数（索引）{
var pic=新图像（）；
pic.onload=函数（）{
$scope.imagesToLoad[index].image=pic；
--图像计数；
如果（imagesToLoadCount==0）{
//当所有图像完成加载时，将调用此函数，
回调（）；
}
};
pic.onerror=函数（）{
//这里的故障处理。
--图像计数；
如果（imagesToLoadCount==0）{
//当所有图像完成加载时，将调用此函数，
回调（）；
}
};
pic.src='assets'+$scope.imagesToLoad[index].Name1+“\ux”+
$scope.imagesToLoad[index].Name2+“”+$scope.imagesToLoad[index].Name3+'.png'；
};
//开始加载所有图像。
对于（变量i=0；i

但是，我不确定您希望何时调用回调，因为您希望在所有图像开始加载时调用该回调

我在回调的目的地上添加了一条注释，我放置

回调的位置将在所有图像完成（或出错）时调用

而且，由于我不确定您的web如何使用该url，请确保可以访问
pic
的
src
。
我将检查您的web控制台是否存在任何404错误，以确保您尝试加载正确的文件。我不知道你的文件路径，所以src有可能是错误的

pic.src=''

上面看起来有点奇怪-尝试用双引号替换
assets
前面和
.png
后面的单引号，这样就不需要转义了

此外，如果您输入了一个
onerror
事件，您可以检查加载过程中是否有错误，例如：

pic.onerror = function () {
    console.log('There was an error. Check web console for more info');
}

为什么要使用src-like
？您应该只使用
pic.src=“\assest…..”
查看@fuyushimoya的评论
onload
事件在浏览器完全加载图像时发出，而不是在图像开始加载时发出。是否希望在所有图像加载完毕后执行回调？