图片未正确加载

Question

我正在开发一个可以在 IOS 设备上运行的 HTML 和 js 应用程序。在这个应用程序中，我使用了大量图像并使用 src 在函数中设置这些图像的路径。此函数完成后，我正在调用另一个函数，我正在绘制画布，问题是所有这些图像都没有正确加载，一些图像的宽度仍然为 0。如何确保在我之前正确加载所有图像调用下一个函数。

谢谢

Answer 1

请在提问前进行更多搜索。

等待图像完成加载很容易：

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

在尝试绘制之前，请确保已为每个图像触发了 onload 事件。 如果您有多个图像并且不想让事情变得复杂，那么有一些库可以为您执行此操作，例如 pxloader。

Answer 2

这将确保您的所有图片都已加载

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

Answer 3

您可以使用图像加载事件触发代码在图像完全加载时运行；下面是一个例子。附加到 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";
    }
}