0

收集到阵列中的图像相互叠加以完成最终图片。问题是一旦图像加载，循环似乎会继续运行，因为几乎不可能滚动或发生任何其他动画。 

function map(id){
var img_elem = document.getElementById("img_elem");
var ctx = document.getElementById('canvas').getContext('2d');
var name = <?php echo json_encode($sorted_array);?>;
var elements=<?php echo $filecount?>;
var image= [];
for(i=0;i<elements;i++){
image[i]= new Image();
image[i].src = "images/"+name[i];
image[i].setAttribute("class","container");
image[i].setAttribute("style","position:absolute");
ctx.drawImage(image[i],1,1);
alert(image[i].src);
}
}
4

1 回答 1

1

这可能很慢的一个原因是您重复地将元素附加到 DOM，这通常会导致浏览器重绘页面。

您可以通过将更改分组并进行一次添加来避免很多情况，如下所示：

var buffer = [];
for(i=0;i<elements;i++){
    buffer.push("<img ",
        "src='images/",name[i],"' ",
        "class='container' ",
        "style='position:absolute' ",
        "id='",name[i],"'/>");
}
document.getElementById(id).innerHTML = buffer.join(""):
于 2013-01-28T17:54:22.010 回答