0

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>
4

3 回答 3

1

如果您将其作为动画进行，则最好只使用适当的图像 url 更改图像标签的 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 不是您调用该函数的唯一时间。如果是这样，那么你的问题是没有实际意义的，因为你问的是经常调用它的影响。按照我展示的方式进行操作，您首先从文档中获取代码（一件好事），并使其成为任何调用代码都可以替换由该图像标签提供的图像文件。

于 2013-02-27T03:41:31.930 回答
1

如果您使用 removeChild 从#image div 中删除图像，则不会。当您从文档中删除图像时，垃圾收集会迅速释放内存。因此，只要您不保留隐藏在 DOM 中某处的图像，就没有什么可担心的。

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

于 2013-02-27T03:42:34.980 回答
0

如果你只做一次没关系

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

于 2013-02-27T03:42:57.147 回答