使用Javascript预载图像

我想预先加载一些图像。这里是我试图适应我的需求的代码。使用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(); 
};

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

感谢

来源

2015-07-06 Mark

为什么你的src像'' fuyushimoya

请参阅@ fuyushimoya的评论。当图像被浏览器完全加载时，不会在加载时发出onload事件。 – marekful

你想在所有图像加载完成时执行回调吗？ – Syd

从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可到达。

来源

2015-07-06 09:01:44 fuyushimoya

我会检查您的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'); 
}

来源

2015-07-06 09:10:13

使用Javascript预载图像

回答

相关问题