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

これが遅くなる可能性が高い理由の1つは、DOMに要素を繰り返し追加しているためです。これにより、ブラウザーがページを再描画することがよくあります。

変更をグループ化し、次のような1つの追加を行うことで、多くのことを回避できます。

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 に答える