Question

我目前在加载图片和在画布上绘图时遇到问题。在localhost中，它可以顺利运行，但是当放到我的Web服务器上时，它根本不像localhost那样流畅。我需要刷新第二页到树时间然后才能工作。那么有没有其他方法可以解决这个问题。以下是我的示例代码

function action1() {
 var imgObj = new Image()
 timer = setInterval(function(){
         imgObj.src = 'img/velOpen/' + (index++) + '.png';
         imgObj.onload = function(){
                 context.clearRect(0,0, context.canvas.width, context.canvas.height);
                 context.drawImage(imgObj, X, y);   
         }
        },100);
};

注意：我的serval图像大小只有32 kb

Answer 1

在开始绘制画布之前，您需要等到所有图像都已加载。

以下是如何在最后一次图像加载后立即调用函数的示例。

function loadImageGroup(urls, onCompleteFunc) {
    var numImagesNotYetLoaded = urls.length;
    var urlToImageMap = {};    
    var markLoaded = function() {
        if (--numImagesNotYetLoaded == 0)
            onCompleteFunc(urlToImageMap);
    }

    for (var i = 0; i < urls.length; i++) {
        var img = new Image();
        img.onload = markLoaded;
        img.src = urls[i];
        urlToImageMap[urls[i]] = img;
    }
}
var urls = [
    'http://www.google.com/images/srpr/logo3w.png'
  , 'http://www.google.com/images/icons/product/chrome-48.png'
];
loadImageGroup(urls, function(urlToImageMap) {
    //all are loaded. draw to canvas here
    var imgObject = urlToImageMap['http://www.google.com/images/srpr/logo3w.png'];
    alert(imgObject.width)
});

http://jsfiddle.net/vHwKr/1/

这只是一个样本。我这样说是因为它并不完全健壮。想象一下，如果图像因某种原因无法加载 - 永远不会调用on complete函数。也许你想要超时或其他什么......

加快加载和在html5画布中绘制多个图像

1 个答案: