请等待页面完全加载后内容才会加载答案

【问题标题】：Please wait content won't load until page is fully loaded请等待页面完全加载后内容才会加载
【发布时间】：2018-07-19 21:13:26
【问题描述】：

我正在尝试使用常规方法创建一个元素，并在页面完成加载后使用 jQuery 隐藏它。

你可以在很多地方看到这种基本方法，但这里的代码还是：

我想在页面加载时显示的图像的 DIV，就在 <body> 标记之后：

<div class="pleasewait"></div>

要在页面加载后从屏幕上删除图标，在 HTML 页面的 HEAD 部分：

$(window).bind("load", function() {
    $(".pleasewait").fadeOut("slow");;
});

CSS 来设置页面中心的图片样式：

.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.pleasewait {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(img/ajax-loader.gif) center no-repeat #fff;
}

我的 PHP 页面上的导航栏加载正常，但在页面完全加载之前，<body> 部分上没有显示任何内容（包括等待服务器调用完成并形成页面的其余部分）。

虽然还有其他更好的方法可以实现我的目标，但我真的很想了解我在这里做错了什么。

【问题讨论】：

“但在页面完全加载之前，部分不会显示任何内容” - 这不正是您想要的吗？为什么还要在上面放置一个元素？不清楚你在这里实际问的是什么。
或者你的意思是你的 .pleasewait 元素本身没有显示？好吧，如果您将其放入外部文件中，那可能是由于之前不可用的 CSS。这是您真正应该内联 CSS 的情况之一。
我的意思是，一旦页面加载，pleasewait 元素就会与页面的其余部分一起显示（然后消失）。我无法让它在页面的其余部分之前加载。
好吧，那就反过来了。不过，尝试解决这个问题的第一种方法是：“这是你真正应该内联 CSS 的情况之一。” 如果这没有帮助，那么你可能有更多的服务器如何将文档返回给浏览器的问题，然后您将进入脚本和/或 Web 服务器级别的输出缓冲的有趣世界。

标签： javascript jquery html css

【解决方案1】：

HTML

<div id="preloader">
    <div id="status"> 
    </div>
</div>
<div id="wrappers">
    Welcome to page
</div>

CSS

#preloader { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: #fff; 
    z-index: 999999; 
}

#preloader #status { 
    width: 70px;
    height: 70px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    background-image: url(images/loader.gif); 
    background-repeat: no-repeat; 
    background-position: center; 
}

jQuery

$(document).ready(function(){
    $(window).load(function() {
        $('#status').fadeOut(); 
        $('#preloader').delay(100).fadeOut('fast');  
        $('#wrappers').delay(250).css({'overflow':'visible'});
    });  
});

【讨论】：

它不起作用，而且我在$(window).load 上得到一个 jQuery 异常。我正在使用 jQuery 3.1.1。我遇到的问题是只有在整个页面加载后才会显示所有内容（包括请稍候消息）。
为什么将$(window).load 包裹在$(document).ready 中？这完全是多余的。 @PauloHgo 因为jQuery 3.0 they removed load 所以现在它必须用作$(window).on("load", function () {......})
也来自there: When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts. -> 这可能是你的问题吗？
@derHugo 确认。
我看过了。我想真正的问题是如何在页面的其余部分之前加载某些内容？这个页面是一个 PHP 脚本，它调用一个需要几秒钟来响应的 API。然后身体的其余部分被构建和显示，但我不能让“请稍候”消息或图像加载之前。我可以在之后卸载它，但它会与页面的其余部分一起加载，因为它在文档的 BODY 中。

【解决方案2】：

从我看到的 cmets 中，您使用的是 jQuery 3.1.1。

.bind() 自 jQuery 3.0 起为 deprecated

改为使用

$(window).on('load', function(e){
    ....
})

还要确保（来自this answer 和jQuery API document）：

使用依赖 CSS 样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。

【讨论】：

谢谢。那没有帮助。我可以在页面加载后使“请稍候”图像或文本消失。我无法做到的是在通过我的 PHP 代码将页面的其余部分放在一起之前加载它。我可能在这里遗漏了一些基本/基本的东西。