图像加载不正确

我正在开发一个将在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

图像加载不正确

回答

相关问题