search

Home  >  Q&A  >  body text

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

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

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

天蓬老师天蓬老师2896 days ago436

reply all(7)I'll reply

  • 天蓬老师

    天蓬老师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效果,让页面加载完再显示

    reply
    0
  • ringa_lee

    ringa_lee2017-04-10 15:22:11

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

    reply
    0
  • 天蓬老师

    天蓬老师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>
    

    应该是这样,我都忘了

    reply
    0
  • PHPz

    PHPz2017-04-10 15:22:11

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

    reply
    0
  • 大家讲道理

    大家讲道理2017-04-10 15:22:11

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

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

    pace.js

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

    reply
    0
  • 迷茫

    迷茫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>

    reply
    0
  • 怪我咯

    怪我咯2017-04-10 15:22:11

    我也需要这个

    reply
    0
  • Cancelreply