圖像加載不正確

我正在開發一個將在IOS設備上運行的HTML和js應用程序。在這個應用程序中，我使用了大量的圖像，並使用src來設置這些圖像在一個函數中的路徑。這個函數完成後，我打電話給另一個函數，我正在繪製一個畫布，問題是所有這些圖像加載不正確，一些圖像的寬度仍爲0.我如何確保所有圖像在我之前正確加載調用下一個函數。圖像加載不正確

感謝

來源

2012-03-27 user1000397

我們需要查看您的相關代碼。 – 2012-03-27 15:23:35

可能的重複[HTML5畫布drawImage不工作在第一次點擊]（http://stackoverflow.com/questions/9796300/html5-canvas-drawimage-not-working-on-first-click） – 2012-03-27 15:27:40

可以使用圖像的onload事件來觸發代碼運行時圖像滿載;下面是一個例子。在image.onload處理程序中的代碼在設置image.src後在某處完全加載時運行。

var p = {  
    display: function(imageUrl) { 
     var availableDimensions = this.getAvailableDimensions(); 
     $("#loadingImg").css("display", "none"); 
     var canvas = document.getElementById("myCanvas"); 
     var image = new Image(); 
     image.onload = function() { 
      canvas.width = image.width; 
      canvas.height = image.height; 
      canvas.getContext("2d").drawImage(image, 0, 0, image.width, image.height); 
      canvas.style.display = "inline"; 
     }; 
     image.src = imageUrl + "&width=" + availableDimensions.width + "&height=" + availableDimensions.height + "&negative=false"; 
    } 
}

來源

2012-03-27 15:26:46 Tom

我使用許多圖像和他們都需要檢查 – user1000397 2012-03-27 15:30:21

好吧，如果你可以爲一個圖像做到這一點，你當然可以爲許多圖像做到這一點，而不是？ – Tom 2012-03-27 15:31:17

這將確保所有的圖像加載

var images = [{src: "foo.jpg"},{...}]; 
var loaded = 0; 
function loadImages(){ 
    for(var i=0;i<images.length;++i){ 
    var tmp = new Image; 
    tmp.onload = function(){loaded++;if(loaded == images.length){nextStep();}}; 
    tmp.src = images[i].src; 
} 

function nextStep(){ 
    console.log("everything loaded"); 
} 

loadImages();

來源

2012-03-27 15:28:06 samccone

你問一個問題之前，請多做搜索。

等待完成加載圖像很簡單：

var img = new Image(); // Create new img element 
img.onload = function(){ 
    // execute drawImage statements here 
}; 
img.src = 'myImage.png'; // Set source path

確保onload事件已經試圖繪製之前解僱爲每個圖像。 如果您有多張圖片並且不想讓複雜的事情發生，那麼有些庫可以爲您做到這一點，例如pxloader。

來源

2012-03-27 16:39:01

圖像加載不正確

回答

相關問題