为什么预读的gif图像显示出来后是静止的？该怎么处理
日期：2014-05-16 浏览次数：20411 次
为什么预读的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中去取那张图片了，实现了预加载 图片也会动。
我在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中去取那张图片了，实现了预加载 图片也会动。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
