如何实现在页面上所有内容加载完之前一直显示loading...页面?
比如页面上有一些图片,有不少js脚本。
希望实现的效果,打开连接的时候,一直显示loading...页面,然后全部加载完之后 再整个显示页面
天蓬老师2017-04-10 15:22:11
将javascript
放在<head></head>
中执行
<html>
<head>
<script type="text/javascript">
aaa();//直接调用,就在页面加载前执行了,但是此时不能访问任何一个document控件
function aaa(){
alert(1);
}
</script>
</head>
希望这篇文章对你有帮助:js网页Loading效果,让页面加载完再显示
ringa_lee2017-04-10 15:22:11
提供一个思路:<body>
顶部放一个 position:fixed
的 loading 遮罩,覆盖整个页面。
然后用 JS 在 onload
事件里把这个遮罩隐藏掉就行了。
天蓬老师2017-04-10 15:22:11
<html>
<head>
<title>Test</title>
<style>
.loading {
position:fixed;
width:100%;
height:100%;
}
</style>
</head>
<body>
<p class="loading">Loading</p>
<p>下面放要放的内容</p>
<script>
window.onload=function(){
$(".loading").fadeOut();
}
</script>
</body>
</html>
应该是这样,我都忘了
大家讲道理2017-04-10 15:22:11
如果只是简单的loading图,没有进度的效果,前方的同僚都回答到了!
如果需要进度或百分比,就不得不推荐这一神器了
pace.js
反正是很神奇,很牛逼...
迷茫2017-04-10 15:22:11
<!DOCTYPE >
<html lang="zh-CN">
<head>
<title>正在载入</title>
<meta http-equiv="Content-Type" content="text/html; charset=" gb2312 ">
<meta charset="utf-8 "/>
</head>
<body bgcolor="#FFFFFF " leftmargin="0 " topmargin="0 ">
<table border=0 cellpadding=0 cellspacing=0 width="100% " height="100% ">
<tr>
<form name=loading>
<td align=center>
<p><font color=gray>正在载入首页,请稍候.</font></p>
<p>
<input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:gray; background-color:white; padding:0px; border-style:none; ">
<br>
<input type=text name=percent size=46 style="font-family:Arial; color:gray; text-align:center; border-width:medium; border-style:none; ">
</p>
</td>
</form>
</tr>
</table>
<script>var bar = 0
var line = "|| "
var amount ="|| "
count()
function count(){
bar= bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"% "
if (bar<99)
{setTimeout("count() ",100);}
else
{window.location = "目标页 ";}
}
</script>
</body>
</html>