发表新帖
发表新帖

Hiding everything until the page has finished loading

后端 未结
关注
8 1439
滥情空心
滥情空心 2020-12-19 06:33

I am looking to have everything on my page hidden until the page has finished loading. I have seen many posts and tried different things. The most common solution which work

相关标签:
8条回答
  • 予麋鹿
    2020-12-19 06:55

    I would do the following

    <!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js"></script>
<style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body class="hidden">
    this is the body...



    <script type="text/javascript">
        $(document).ready(function(){
            $("body").removeClass('hidden');
        });
    </script>
</body>
</html>

    So hide it in inline CSS in the header (so it will take immediate effect and not suffer the latency of fetching an external file), then revel it in Javascript. Note: this isn't best practice with inline CSS and JS, but should give you the lowest latency and therefore not have a flash of visibility.

    0 讨论(0)
  • 名媛妹妹
    2020-12-19 06:56

    To hide it using javascript, set script just after BODY tag declaration:

    <body>
    <script>document.body.style.display = "none";</script>

    This way if javascript disabled, BODY is still shown

    0 讨论(0)
  • 半阙折子戏
    2020-12-19 07:03

    Try this example. http://jsfiddle.net/iashu/AaDeF/

    <div id="loading"></div>

<div id="container">
    container content....
</div>

    Jquery

    $(window).load(function() {
    //show();
});


function show() {
    $('#loading').hide();
    $('#container').fadeIn();
};

setTimeout(show, 3000);
    0 讨论(0)
  • 难免孤独
    2020-12-19 07:03

    Flicker you mentioned is coming because by the time jquery hides the body, browser would have started painting the dom. Better solution is to hide it with css, which should avoid showing anything at all while page is being loaded, then you can unhide body inside jquery.load()

    0 讨论(0)
  • 广开言路
    2020-12-19 07:11

    Give class to body and set Its css to "display:none"; Then Put the code before "body" tag

    $(document).ready(function {
    $('#bodyOuter').show();
});

    So ,It will be hidden and after page loads It will be shown

    0 讨论(0)
  • 滥情空心
    2020-12-19 07:15

    Try this

        $('#domelement').css('opacity', 0);
    $(window).load(function() {
      $('#domelement').css('opacity', 1);
    });

    replace "domelement" with the selector of the DOM element(s) you want to hide till loaded

    0 讨论(0)
 看不清?
提交回复
热议问题