Question

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

由于

Answer 1

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

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 2

在提出问题之前，请进行更多搜索。

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

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 3

您可以使用image onload事件触发代码在图像完全加载时运行;下面是一个例子。在我设置image.src后，当图像完全加载到映像时，附加到image.onload的处理程序中的代码会运行。

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";
    }
}

图像加载不正确

3 个答案: