無效的JavaScript循環

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