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

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

<html>
    <head>
        <title>Test</title>
        <style>
            .loading {
                position:fixed;
                width:100%;
                height:100%;
            }
        </style>
    </head>
    <body>
        <div class="loading">Loading</div>
        <div>下面放要放的内容</div>
        <script>
            window.onload=function(){
                $(".loading").fadeOut();
            }
        </script>
    </body>
</html>

应该是这样，我都忘了

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

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

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

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

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

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

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

pace.js

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

【热门文章】