Question

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

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

Answer 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(""):

效率低下的javascript循环

1 个答案: