javascript在一个function里控制loading的显示与隐藏

0 0

javascript在一个function里控制loading的显示与隐藏5

代码如下，不知为何无法执行出loading显示后又隐藏的效果。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript在一个function里控制loading的显示与隐藏</title>

<script type="text/javascript" language="javascript">
function longtimefunction(){
	//开始显示loading
	document.getElementById('loading').style.display='block';
	var t=setTimeout("alert('这是一个长耗时的程序!');",4000);
	//长耗时程序完成后，隐藏loading
	document.getElementById('loading').style.display='none';
}
</script>
</head>

<body>
<div id="loading" style="color:red;display:none">Loading...</div>
<div id="bgDiv">
<h1>这里是网页标题</h1>
<p>这里是网页内容</p>
<p>这里是网页内容</p>
<p><a href="#" onClick="longtimefunction()">加载长耗时function</a></p>
</div>


</body>
</html>

JavaScript

2014年5月22日 21:28

tashibajie
26
0 0 2

2个答案按时间排序按投票排序

0 0

采纳的答案

//开始显示loading
1 document.getElementById('loading').style.display='block';
2 var t=setTimeout("alert('这是一个长耗时的程序!');",4000);
3 //长耗时程序完成后，隐藏loading
    document.getElementById('loading').style.display='none';
这个是加载到1的时候准备渲染页面的时候但是页面还在往下走走到2碰到定时器(4秒执行就行向下加载) 一个动作它又继续往下走到了3 3这也是要渲染而3是要隐藏所以在1还没有完全渲染出来就被夭折啦！
123 这代码实际就是
类似于下面的代码
document.getElementById('loading').style.display='block';
document.getElementById('loading').style.display='none';

所以解决的方法我个人有2种

   document.getElementById('loading').style.display='block';
    var t=setTimeout("alert('这是一个长耗时的程序!');",4000);
     alert("此处加个动作");
    //长耗时程序完成后，隐藏loading
    document.getElementById('loading').style.display='none';

第二种就是把隐藏放到定时器中
setTimeout(function(){
         //长耗时程序完成后，隐藏loading
        document.getElementById('loading').style.display='none';
    }, 1000)
可能说的有点逻辑乱你试试就清楚啦

2014年5月23日 00:39

lao1984wang
617
0 0 24

1条评论

0 0

可以了， 只要点击加载长耗时function 就会显示
然后一秒隐藏


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript在一个function里控制loading的显示与隐藏</title>

<script type="text/javascript" language="javascript">
function longtimefunction(){
	//开始显示loading
	document.getElementById('loading').style.display='block';
	//var t=setTimeout("alert('这是一个长耗时的程序!');",4000);
	
	setTimeout(function(){
	     //长耗时程序完成后，隐藏loading
		document.getElementById('loading').style.display='none';
	}, 1000)
	
}
</script>
</head>

<body>
<div id="loading" style="color:red;display:none">Loading...</div>
<div id="bgDiv">
<h1>这里是网页标题</h1>
<p>这里是网页内容</p>
<p>这里是网页内容</p>
<p><a href="#" onClick="longtimefunction()">加载长耗时function</a></p>
</div>


</body>

2014年5月22日 21:38