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，这意味着下一个图片只会在加载上一个图片时开始加载，但是，在您的问题中，您似乎期望在上一次开始后立即开始下一次开始。

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

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的地方将被调用。

而且，由于我不确定您的网络如何使用该网址，因此请确保src的{{1}}可以访问。

Answer 2

我会检查您的网络控制台是否有任何404错误，以确保您尝试加载正确的文件。我不知道你的文件路径，所以src有可能是错误的。

Application

上述内容看起来有点奇怪 - 尝试用双引号替换MessageAdapter之后的单引号和MessageDatabase之后的单引号，然后您就不需要逃避。

此外，如果你输入pic.src = '<img src=\'assets' + $scope.imagesToLoad[count].Name1 + "_" + $scope.imagesToLoad[count].Name2 + "_" + $scope.imagesToLoad[count].Name3 + '.png\'/>'事件，你可以检查加载是否有错误，例如

assets

使用Javascript预加载图像

2 个答案: