0

document.getElementById(id).appendChild(img)次のコードで使用すると、ブラウザに問題が発生しますか？ドキュメントの存続期間中にappendChild（）を使用して画像を何度も更新すると、メモリの問題が発生する可能性がありますか、それとも1つのノードのみが作成されるのでしょうか。次のコードは画像を1回だけロードすることを知っていますが、アニメーションとして画像をランダムに変更するようにコードを拡張することを計画していました。document.getElementById(id).appendChild(img)ドキュメントは、ドキュメントの存続期間中に何度も呼び出しを確認し ます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">

    var img = document.createElement("IMG");      
    images = new Array(); 

    function random_image(id) 
    {
        var i = 0;              

            for(i = 0; i < 7; i++) 
            {               
              images[i] = "image" + i + ".jpg"
            }       

        var random = (Math.floor(Math.random()*7)); 
        img.src = images[random];
        document.getElementById(id).appendChild(img);
    }
    </script>
    </head>
    <body onload = "random_image('image')">
    <div id="image"></div>
    </body>
    </html>
4

3 に答える 3

1

アニメーションとして実行している場合は、画像タグ自体を置き換えるのではなく、画像タグのsrcを適切な画像URLで変更する方がよいでしょう。

*最初のコメントに応じて編集します*

必要なコードはすでに用意されていますが、実行しているのは、毎回画像をドキュメントに再追加することです。私が提案しているのは、すでに取得している画像のsrcを変更することです。

var img = document.createElement("IMG");      
images = new Array(); 
var i = 0;              
for(i = 0; i < 7; i++){               
    images[i] = "image" + i + ".jpg"
}  

function onLoad(){
    random_image('image');
    document.getElementById(id).appendChild(img);
}

function random_image(id){
    var random = (Math.floor(Math.random()*7)); 
    img.src = images[random];
}
window.onload = onLoad;

関数を呼び出すのは、ドキュメントの読み込みevnetだけではないと想定していることに注意してください。もしそうなら、あなたの質問はあなたがそれをたくさん呼ぶことの影響についてあなたが尋ねている議論の余地があります。私が示している方法でそれを行うと、最初にドキュメントからコードを取り出し（良いことです）、また、呼び出し元のコードがその1つの画像タグによって供給された画像ファイルを置き換えることができるようにします。

于 2013-02-27T03:41:31.930 に答える
1

removeChildを使用して#imagedivから画像を削除した場合は違います。ドキュメントから画像を削除すると、ガベージコレクションによってメモリがすぐに解放されます。したがって、DOMのどこかに隠された画像を保持していない限り、心配する必要はありません。

より良いアイデアは、既存のimgタグのソースを変更することです。これにより、新しい要素を作成または破棄せずに画像が置き換えられます。

于 2013-02-27T03:42:34.980 に答える
0

あなたが一度だけそれをしているならそれは大丈夫です

複数回実行すると、多くの画像が追加されます

于 2013-02-27T03:42:57.147 に答える