使用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預載圖像

回答

相關問題