我应该在这种情况下使用img.onload？

-1

请帮我理解我应该在哪里Image.onload正确地绘制图像？我应该在这种情况下使用img.onload？

我的情况：

我从JSON文件加载我的图片，并将它们存储在阵列（imgArray它与图片链接数组）：

var xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'img/img.json', false); 
     xhr.send(); 
     imgArray = JSON.parse(xhr.response);

比我创建一个接受一个函数我imgArray，使新的图像进行的每一个环节，并把它们变成新的数组：

function loadImage(ImgArray){ 

    var pics = []; 
    var img; 

     ImgArray.forEach(function(link){ 
     img = new Image(); 
     img.src = link; 

     pics.push(img.src); 
    }); 
     return pics; 
};

再举例来说，我想画的图像之一：

function draw(){ 
ctx.drawImage(loadImage(imgArray)[0]),0,0,100,100); 
};

draw（）函数的结果是带有新Image链接的数组，但我无法绘制它们，因为我知道它们尚未加载。请别人告诉我什么时候应该这样做？

这里是链接到完整的故事：http://jsfiddle.net/L23oam57/1/

来源

2015-07-03 DarthJS

Recrusive电话：

var counter = 0; 
var pics = []; 
function loadImage(img){ 


     var img; 


      img = new Image(); 
      img.src = link; 
      img.onload = function(e){draw(img)}; 
      pics.push(img.src); 


    }; 

    function draw(image){ 
    ctx.drawImage(image),0,0,100,100); 
    if(counter != imageArray.length) 
    { 
     loadImage(ImgArray[counter]); 
     counter++; 

    } 
    };

来源

2015-07-03 20:46:03 Proxytype

我会立即排队的所有图像，因为这将让浏览器更好的并行即应请求导致对用户“更加敏感”。这种好处也可以看出来，但在较小的程度上，如果图像是从缓存中获取的，因为它避免了必须“等待onload事件周期”。此外，它将确保即使某些图片加载失败，也会尝试获取所有图片（即部分结果或快速故障比永远等待，甚至永远不会发生）。 – user2864740

这是一个队列只有一个文件加载，另一个等待，直到当前完成绘制在画布上......如果你想所有在一起，你真的不需要队列加载每一个像你一样，并呼吁绘制并通过对象，这将并行发生，但我不真的推荐这可能会导致浏览器专门冻结在移动设备上... – Proxytype

非常感谢！我会尽力 – DarthJS

我应该在这种情况下使用img.onload？

回答

相关问题