javascript在一个function里控制loading的显示与隐藏
代码如下,不知为何无法执行出loading显示后又隐藏的效果。
[code="javascript"]
javascript在一个function里控制loading的显示与隐藏 function longtimefunction(){ //开始显示loading document.getElementById('loading').style.display='block'; var t=setTimeout("alert('这是一个长耗时的程序!');",4000); //长耗时程序完成后,隐藏loading document.getElementById('loading').style.display='none'; }
[/code]
//开始显示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)
可能说的有点逻辑乱 你试试就清楚啦
[code="java"]
可以了, 只要点击加载长耗时function 就会显示
然后一秒隐藏
javascript在一个function里控制loading的显示与隐藏 function longtimefunction(){ //开始显示loading document.getElementById('loading').style.display='block'; //var t=setTimeout("alert('这是一个长耗时的程序!');",4000); setTimeout(function(){ //长耗时程序完成后,隐藏loading document.getElementById('loading').style.display='none'; }, 1000) }
[/code]