发表新帖
发表新帖

Hide page until everything is loaded Advanced

前端 未结
关注
8 1614
佛祖请我去吃肉
佛祖请我去吃肉 2020-12-13 04:10

I have a webpage which heavily makes use of jQuery.

My goal is to only show the page when everything is ready.

With that I want to avoid showing the annoying

相关标签:
8条回答
  • 北海茫月
    2020-12-13 04:30

    The simplest solution I've come up with is to wrap the body in a as suggested previously, but set it as hidden from the get go, then use JQuery (or javascript) to unhide on load after all components are loaded.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="bodyDiv" hidden>

Hello World!

</div>
<script>
$(document).ready(function() {

  // add JQuery widget loads here
  
  $("#bodyDiv").show(); // reveal complete page
})
</script>

    0 讨论(0)
  • 慢半拍i
    2020-12-13 04:31

    Start your HTML with:

    <body style="opacity:0;">

    At the end of your script:

    document.body.style.opacity = 1;

    0 讨论(0)
  • 夕颜
    2020-12-13 04:32

    Here is a jQuery solution for those looking:

    Hide the body with css then show it after the page is loaded:

    CSS:

    html { visibility:hidden; }

    JavaScript

    $(document).ready(function() {
  document.getElementsByTagName("html")[0].style.visibility = "visible";
});

    The page will go from blank to showing all content when the page is loaded, no flash of content, no watching images load etc.

    0 讨论(0)
  • 一生所求
    2020-12-13 04:33

    You should try setting visibility to hidden instead of display:none. Setting visibility to hidden will retain all elements positions and dimensions, thus it shouldn't create layout problems.

    0 讨论(0)
  • 天涯浪人
    2020-12-13 04:36

    Anything done with jQuery will normally have to wait for document.ready, which is too late IMHO.

    Put a div on top, like so:

    <div id="cover"></div>

    set some styles:

    #cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;}

    and hide it with JS when all elements are loaded:

    $(window).on('load', function() {
   $("#cover").hide();
});

    Or if for some reason your script uses even longer time then the DOM elements to load, set an interval to check the type of some function that loads the slowest, and remove the cover when all functions are defined!

    $(window).on('load', function() {
    $("#cover").fadeOut(200);
});

//stackoverflow does not fire the window onload properly, substituted with fake load

function newW()
{
    $(window).load();
}
setTimeout(newW, 1000);
    #cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999; 
    font-size: 60px; text-align: center; padding-top: 200px; color: #fff;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
    <li>This</li>
    <li>is</li>
    <li>a</li>
    <li>simple</li>
    <li>test</li>
    <li>of</li>
    <li>a</li>
    <li>cover</li>
</ul>

<div id="cover">LOADING</div>

    0 讨论(0)
  • 清歌不尽
    2020-12-13 04:39

    If you have a div #bodyholder then you can put display:none in your CSS for it and then with jQuery do:

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

    I don't see why hiding a div should interfere with the loading of anything, because all it means is it is hidden. However, if you have lots of jQuery being used then make sure you wrap it in $(document).ready which will make sure that the DOM is fully loaded before the Javascript is executed

    A further point is that HTML/CSS is designed for progressive loading, and if you do it properly then you can get a nice progressive loading of content for your users. I personally wouldn't want my users getting a white screen for a few seconds until everything was loaded. Move your Javascript to the end of the page so that it doesn't block loading and get content onto the screen as quickly as possible.

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