Question

我有绘图应用程序，允许用户在画布上绘制各种形状。代码在Chrome，IE 10，IE 9（9.0.8112.16421）上经过测试并正常运行，但它在IE 9（9.0.8112.16421 64位版本）上显示出荒谬的行为。主要问题是图像未在画布上绘制（一段时间）。无法弄清楚原因，如果我开始调试或在加载图像和在画布上绘制它们之间设置警报然后它正常工作。图像之类的图像没有完全加载，但如果这是原因那么它应该在IE 9版本中表现相似不是64位版本。任何线索如何处理这个问题???

Answer 1

线索：

应用程序因不显示应该出现的图像而间歇性地行为不端。

如果符合以下条件，应用会正确绘制：

开始加载图片
警告框
恢复应用程序

听起来你在尝试绘制图像之前没有给你的图片加载时间。

// This doesn't guarantee image1 is fully loaded before trying to use it

var image1=new Image();
image1.src="myImage.png";
context.drawImage(image1,0,0);

修复是使用图像的完整加载时触发的图像的.onload回调

// This guaranteed image1 is fully loaded before trying to use it

var image1=new Image();
image1.onload=function(){
    context.drawImage(image1,0,0);
}
image1.src="myImage.png";

如果你要加载很多图像，这里有一个加载所有图像然后调用start（）的图像加载器：

var imagesOK=0;
var imgs=[];
var imageURLs=[];
// .push all your image urls into imageURLs[]
// imageURLs.push("myImage1.png"); 
// imageURLs.push("myImage2.png");  
imageURLs.push("");
loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

function start(){

    // the imgs[] array holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]

}

代码不适用于IE9的特定版本

1 个答案: