日期:2014-05-16  浏览次数:20422 次

为什么预读的gif图像显示出来后是静止的?
我在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是显示为动画的,不过图片不能立即显示,需要临时下载,用户体验就差了。
如何解决这个问题呢?多谢多谢!!!

------解决方案--------------------
这样看看,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>
------解决方案--------------------
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>



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