加快在html5 canvas中加载和绘制多个图像的速度

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

注意：我的骨图像只有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函数将永远不会被调用。 也许您想要超时或其他什么...