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

如何让网页中图片等待5秒再显示
如何让网页中图片等待5秒再显示。

网页打开的时候,网页中的图片就会马上显示。如何让某一个图片,在网页打开后5秒在显示出来。

------解决方案--------------------
1. 图片载入有判别事件,在事件中设置图片对象的显示隐藏
2. 网页加定时器,到了5s,把指定图片显示出来
------解决方案--------------------

<style>
#div1{height:100px;width:100px;background-color:yellow;display:none}
</style>
<script type="text/javascript">
window.onload=function(){
var i=1;
setInterval(function(){
i++
if(i==5){
document.getElementById("div1").style.display="block";
}
},1000);
}
</script>
<div id="div1">
11222
</div>

------解决方案--------------------
2楼代码错误很多:
1、根据要求,首先就应该用setTimeout()而不是setInterval(),这个7楼已经转录了函数说明。
2、而且要在5秒后显示的话,根本不需要设置一秒事件并进行计数,画蛇添足了。
3、如果使用setInterval(),在触发了显示操作之后,应该用clearInterval()来取消不必要的继续计时。

正确做法是直接使用setTimeout(),直接5秒一步到位:
<img id="theforever" src="http://avatar.profile.csdn.net/A/9/7/2_theforever.jpg" />
<script type="text/javascript">
document.getElementById("theforever").style.display="none"
setTimeout(function(){
    document.getElementById("theforever").style.display="block";
   }
,5000);
</script>

------解决方案--------------------
$("object").delay("5000").animate();