Question

在以下代码中使用document.getElementById(id).appendChild(img)会导致浏览器出现问题吗？我想知道我是否使用appendChild（）在文档的生命周期中多次更新图像可能会产生内存问题或者只创建一个节点？我知道以下代码只加载图像一次，但我计划扩展代码以随机将图像更改为动画。该文件将看到呼吁文件有效期内多次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>

Answer 1

如果您是以动画形式进行的，那么最好只更改图像标记的src，而不是替换图像标记本身。

*编辑以回复第一条评论*

您已经拥有了所需的代码，但您每次都要将图像重新附加到文档中。我建议的是改变你已经拥有的图像的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不是您调用该函数的唯一时间。如果是的话，那么你的问题是没有问题的，你问的是调用它的影响很大。按照我正在展示的方式进行操作，您首先要从文档中获取代码（这是一件好事），并使其成为任何调用代码都可以替换由该图像标记源代码的图像文件。

Answer 2

如果使用removeChild从#image div中删除图像，则不会显示。从文档中删除图像时，垃圾回收将快速释放内存。所以，没有什么可担心的，只要你不保留隐藏在DOM中的图像。

更好的想法是更改现有img标记的来源，这将替换图像而不创建或销毁新元素。

Answer 3

如果你只做一次就没问题

如果多次这样做，它会添加许多图像

Javascript：多次使用document.getElementById（id）.appendChild（）？

3 个答案: