>  기사  >  웹 프론트엔드  >  如何让网页中图片等待5秒再显示_html/css_WEB-ITnose

如何让网页中图片等待5秒再显示_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 12:22:402289검색

如何让网页中图片等待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>

JS定时器setInterval

用js控制啊,setTimeout()

使用定时器setInterval

setTimeout()  是在事件触发之后的一定时间后执行定义的函数 只执行一次 执行时间自己定义
setInterval() 是在事件触发后每隔一定时间就执行一次 时间自定义 是重复执行
楼主自己选择吧

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

正确做法是直接使用setTimeout(),直接5秒一步到位:
如何让网页中图片等待5秒再显示_html/css_WEB-ITnose
<script> <br /> document.getElementById("theforever").style.display="none" <br /> setTimeout(function(){ <br /> document.getElementById("theforever").style.display="block"; <br /> } <br /> ,5000); <br /> </script>

$("object").delay("5000").animate();

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.