gpt4 book ai didi

Javascript:多次使用 document.getElementById(id).appendChild()?

转载 作者:行者123 更新时间:2023-12-02 18:58:13 24 4
gpt4 key购买 nike

在以下代码中使用 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>

最佳答案

如果您将其作为动画,则最好只更改图像标记的 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 不是您调用该函数的唯一一次。如果是的话,那么你的问题就毫无意义了,因为你问的是频繁调用它的影响。按照我展示的方式进行操作,您首先从文档中获取代码(这是一件好事),并且还可以使任何调用代码都可以替换由该图像标记来源的图像文件。

关于Javascript:多次使用 document.getElementById(id).appendChild()?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15103740/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com