隐藏页面，直到所有内容都被提前加载-HidepageuntileverythingisloadedAdvanced

38  

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

使用jQuery完成的任何事情通常都需要等待文档。准备好了，现在太晚了。

Put a div on top, like so:

在上面放一个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:

当加载所有元素时，将其隐藏在JS中:

$(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!

或者，如果由于某种原因，您的脚本使用更长的时间来加载DOM元素，设置一个时间间隔来检查加载最慢的函数的类型，并在定义所有函数时删除封面!

$(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;
}

    
This
    
is
    
a
    
simple
    
test
    
of
    
a
    
cover


LOADING

22  

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.

您应该尝试将可见性设置为hidden，而不是display:none。将可见性设置为hidden将保留所有元素的位置和维度，因此不应该产生布局问题。

20  

Here is a jQuery solution for those looking:

以下是jQuery解决方案:

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

用css隐藏主体，加载页面后显示:

CSS:

CSS:

html { visibility:hidden; }

Javascript

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.

当页面加载时，页面将从空白状态变为显示所有内容，没有flash内容，没有观看图片加载等。

-1  

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

如果您有一个div #bodyholder，那么您可以将显示:none在您的CSS中，然后使用jQuery:

$(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

我不明白为什么隐藏div会干扰任何东西的加载，因为它的意思是它是隐藏的。但是，如果您使用了大量jQuery，那么请确保将其封装在$(document)中。这将确保在执行Javascript之前，DOM已经被完全加载

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.

更进一步的一点是，HTML/CSS是为渐进式加载而设计的，如果您做得正确，那么您可以为您的用户获得一个良好的渐进式加载内容。我个人不希望我的用户在加载所有内容之前有几秒钟的空白屏幕。将Javascript移动到页面的末尾，这样它就不会阻塞加载，并尽快将内容显示到屏幕上。