javascript - 如何实现在页面上所有内容加载完之前一直显示loading...页面?
天蓬老师
天蓬老师 2017-04-10 15:20:11
0
7
441

如何实现在页面上所有内容加载完之前一直显示loading...页面?

比如页面上有一些图片,有不少js脚本。
希望实现的效果,打开连接的时候,一直显示loading...页面,然后全部加载完之后 再整个显示页面

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全員に返信(7)
Peter_Zhu

javascript放在<head></head>中执行

<html>
<head>
<script type="text/javascript">
aaa();//直接调用,就在页面加载前执行了,但是此时不能访问任何一个document控件
function aaa(){
alert(1);
}
</script>
</head>

希望这篇文章对你有帮助:js网页Loading效果,让页面加载完再显示

いいねを押す +0
左手右手慢动作

提供一个思路:
<body> 顶部放一个 position:fixed 的 loading 遮罩,覆盖整个页面。
然后用 JS 在 onload 事件里把这个遮罩隐藏掉就行了。

いいねを押す +0
Peter_Zhu
<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>

应该是这样,我都忘了

いいねを押す +0
PHPzhong

我习惯 p 加层
你也可以试试

いいねを押す +0
大家讲道理

如果只是简单的loading图,没有进度的效果,前方的同僚都回答到了!

如果需要进度或百分比,就不得不推荐这一神器了

pace.js

反正是很神奇,很牛逼...

いいねを押す +0
迷茫
<!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>
いいねを押す +0
刘奇

我也需要这个

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート