使用Javascript预加载图像

Question

我想预加载一些图像。 这是我要适应我的需求的代码。

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();
};

我的期望是，设置pic.src ，我将进入onload函数并继续加载我的图像。 但我没有进入负载。 所以，我的问题是，当我们设置src时，是否实际上触发了图像加载？

谢谢

Answer 1

从marekful的评论中，我意识到您的上一个函数将按顺序加载images ，这意味着下一个图像将仅在加载上一个图像时才开始加载，但是，在您的问题中，您似乎希望下一个图像在prev开始后立即开始。

因此，如果要开始所有图像的加载过程，请编写类似以下的代码：

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?
};

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

我对您的回调打算在何处发表评论，并在所有图像完成（或出错）后调用该callback 。

而且，由于我不确定您的网站如何使用该网址，因此请确保pic的src是可访问的。

Answer 2

我会检查您的Web控制台是否有404错误，以确保您尝试加载正确的文件。 我不知道您的文件路径，因此src有可能是错误的。

pic.src = '<img src=\\'assets' + $scope.imagesToLoad[count].Name1 + "_" + $scope.imagesToLoad[count].Name2 + "_" + $scope.imagesToLoad[count].Name3 + '.png\\'/>'

上面的代码看起来有些奇怪-尝试仅替换assets前面的单引号，然后将.png替换为双引号，则无需转义。

另外，如果您放置了onerror事件，则可以检查加载是否存在错误，例如

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