为什么预读的gif图像显示出来后是静止的？

tuoxieshu 2007-09-20 11:10:54

我在body的onload事件中调用init函数，对一幅gif图片进行预读：
var m_img; //全局变量
function init(){
m_img = document.createElement("img"); //语句1
m_img.setAttribute("src", "pic\\waiting.gif"); //语句2
}

然后，当用户点击某按钮时，立即显示该gif图片：
function show(){
div = document.getElementById("showDiv"); //语句3
div.appendChild(m_img); //语句4
}

这样做，的确达到了立即显示图片的效果，但是本来应是动态的gif却显示成静止的了。
如果语句1和语句2放到语句3的前面的话，gif是显示为动画的，不过图片不能立即显示，需要临时下载，用户体验就差了。
如何解决这个问题呢？多谢多谢！！！

...全文

194 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

tuoxieshu 2007-10-21

打赏
举报

多谢各位了！

madinsect 2007-09-22

打赏
举报

你用一个隐藏层来放这个gif，即init中就把m_img append进隐藏层，
点击的时候create一个img节点在append进去，这个节点的src和m_img一样就可以了
这样就会从cach中去取那张图片了，实现了预加载图片也会动。

jiaxueq 2007-09-22

打赏
举报

GIF在动啊。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页</title>
<style type="text/css">
body{

}
</style>
</head>
<body onload="init();">
<script>
function init(){
m_img = document.createElement("img"); //语句1
m_img.setAttribute("src", "http://d1.sina.com.cn/200709/20/107310_lunbobutton.gif"); //语句2
}

然后，当用户点击某按钮时，立即显示该gif图片：
function show(){
div = document.getElementById("showDiv"); //语句3
div.appendChild(m_img); //语句4
}
</script>
<button onclick="show();">button</button>
<div id="showDiv"></div>
</body>
</html>

tuoxieshu 2007-09-22

打赏
举报

自己顶一下

jhafang 2007-09-21

打赏
举报

这样看看,src换成图片的路径.
<html>
<head>
<script type="text/javascript">
function init(){
m_img = document.createElement("img");
m_img.setAttribute("src", "1.gif");
}
function show(){
div = document.getElementById("showDiv");
div.appendChild(m_img);
}
window.onload=function(){
init();
}
</script>
</head>
<body>
<div id="showDiv"></div>
<input type="button" onclick="show()" value="显示">
</body>
</html>

tuoxieshu 2007-09-21