隐藏页面加载答案

【问题标题】：Hiding page loading隐藏页面加载
【发布时间】：2018-12-01 18:49:47
【问题描述】：

我的 HTML 标记看起来像这样

<html>
<body>
<div id="loading"><img src="core/design/img/load/load.gif" /></div>
<div id="wrap"></div>
<div id="footer"></div>
</body>
</html>

我正在尝试使用以下解决方案隐藏整个页面加载过程。

CSS 规则：

#loading {
    position:fixed; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%;
    background-image:url("img/load/tr.png"); 
    z-index:100;
}
#loading img {position: absolute; margin-left:-110px; margin-top:-9px; left:50%; top:50%}

还有 Jquery

$(document).ready(function(){
$('#loading').fadeOut(500);
});

现在，问题是这样的页面加载：

第一个丑陋的页面草稿（1-2 秒）
似乎正在加载 div
加载全部内容
加载 div 时消失

You can see it in action

我不明白为什么加载 div 会在 1-2 秒后出现？

我想阻止 1)。

【问题讨论】：

标签： javascript html css

【解决方案1】：

我认为这是一个非常简单的。

首先确保在您的部分中调用了 jQuery。

首先，将页面的所有内容（加载 div 除外）包装在一个名为

的 div 中

<div id="content-wrapper">
    CONTENT HERE
</div>

然后使用 CSS 设置：

#content-wrapper {
    visibility:hidden;
}

然后把 jQuery 做成这样的函数：

$(window).load(function(){

    document.getElementById("content-wrapper").style.visibility="hidden";

    $('#loading').fadeOut(500, function() 
    {
        document.getElementById("content-wrapper").style.visibility="visible";
    });
});

我可以看到您正在使用 Nivo Slider。我也是；）

编辑：我修复了它，现在它可以正常工作了。（你的 body 标签中不再需要 onload 事件了）

在此处查看示例：JSFiddle

【讨论】：

感谢您的帮助。但结果是一样的。清除缓存并尝试刷新给定页面
好的。我做的。请清除缓存并重新加载给定页面。一切正常，但是，加载动画结束得很快。它必须在整页加载后淡出。但它在加载时结束
好了，完成了，现在可以完美运行了。加载页面时，您的内容将被隐藏。加载完成后，图像将淡出并显示您的网站内容。只需检查我的编辑。
仔细阅读我最后的评论。加载动画在它必须淡出之前很久就结束了。它在加载时结束，但必须在整个页面加载后淡出
我已经解决了这个问题。我改变了它，所以它不再这样做了。现在淡入加载栏的动画仅在文档准备好时运行

【解决方案2】：

尝试将用于加载的样式移动为内联，而不是依赖完整的外部 css 文件来加载。如果您查看 Google Chrome 开发人员工具和网络选项卡或类似工具，您会看到页面内容首先加载，如预期的那样，但是您必须等到外部 css 加载和下载，然后加载 css 文件中引用的图像。将样式内嵌应该有助于让加载元素尽快显示，或者至少更快显示。

<div id="loading" style="position: fixed;left: 0;top: 0;
 width: 100%;height: 100%;background-image: url(core/design/img/load/tr.png);z-index: 100;"><img src="core/design/img/load/load.gif"></div>

【讨论】：

结果是一样的。清除缓存并尝试刷新给定页面
@L0rdDEVdem0rt 是的，我可以看到没有太大变化。您是否考虑过隐藏主要内容以使其不会像以前那样闪烁？背景图像现在在时间轴中加载得更快，因为它是内联的，但似乎其他元素也在加载。在加载之前不内联显示主要内容可能会有所帮助。只是一个想法。
好的。我做的。请清除缓存并重新加载给定页面。一切正常，但是，加载动画结束得很快。它必须在整页加载后淡出。但它在加载时结束

【解决方案3】：

为什么不在<div style="display: none;" id="loaded"> 中启动其他所有内容，然后在加载完成后使用$("#loaded").fadeIn()？

【讨论】：

首先，因为我要实现“粘性页脚”。 cssstickyfooter.com 将所有 div 分组到新的 div 中会搞砸。其次，这不是个好主意，因为如果客户端浏览器不支持js，页面将无法加载
@L0rdDEVdem0rt 如果客户端脚本不起作用，您将遇到更大的问题，因为加载屏幕将在所有内容之上。如果你要走这条路，那就全力以赴。
好的。那么粘页脚呢？
@L0rdDEVdem0rt 如果它不能被包装在一个单独的 div 中，那么只需在所有必须在加载时显示的元素上调用 .fadeIn() ，所以 $("#loaded").fadeIn (); $("#footer").fadeIn();或类似的东西。
好的。我做的。请清除缓存并重新加载给定页面。一切正常，但是，加载动画结束得很快。它必须在整页加载后淡出。但它在加载时结束