使用Javascript预加载图像

Question

I want to preload some images. Here is the code that I am trying to adapt to my needs.

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

My expectation was that when pic.src is set, I will get into onload function and continue loading my images. But I am not getting into onload. So, my question is when we set src do we actually trigger image loading?

Thanks

Answer 1

From marekful 's comment I realized that your previous function load images in sequence, which means the next image will only start loading when previous one is loaded, however, in your question, you seems to expect the next start right after the prev starts.

So if you want to start all image's loading process, you write code like:

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

However, I'm not sure when do you want your callback to be called, as you want to call that callback when all image start loading.

I put a comment on where your callback would intent to be, and the place I put the callback would be call when all images is finished(or errord).

And, as I'm not sure how your web works with that url, make sure the src of the pic is reachable.

Answer 2

I would check your web console for any 404 errors to make sure you are trying to load the correct file. I don't know your file path, so there is a chance the src is wrong.

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

The above looks a bit strange - try just replacing the single quotes preceeding assets and following .png with double quotes then you won't need to escape.

Also, if you put in an onerror event, you can check if there is an error in loading, eg

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