Javascript 隐藏页面加载_Javascript_Html_Css

Javascript 隐藏页面加载

javascript html css

Javascript 隐藏页面加载,javascript,html,css,Javascript,Html,Css,我的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> 和Jquery $(document).rea

我的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>

和Jquery

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

现在，问题是页面加载如下所示：

第一页草稿（1-2秒）

显示加载分区

加载全部内容

装载室

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

我想预防1。）

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

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

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

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

然后将jQuery转换成如下函数：

$(window).load(function(){

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

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

我可以看到你正在使用Nivo滑块。我也是；）

编辑：我修复了它，现在它工作得很好。（您不再需要body标签中的onload事件）

看看这里的例子：

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

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

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

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

然后将jQuery转换成如下函数：

$(window).load(function(){

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

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

我可以看到你正在使用Nivo滑块。我也是；）

编辑：我修复了它，现在它工作得很好。（您不再需要body标签中的onload事件）

查看这里的示例：

尝试将用于加载的样式移动到内联，而不是依赖完整的外部css文件来加载。如果您查看Google Chrome Developer工具和网络选项卡，或者类似的工具，您将看到页面的内容首先加载，正如预期的那样，但是您必须等待外部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>

尝试将用于加载的样式移动到内联，而不是依赖于要加载的完整外部css文件。如果您查看Google Chrome Developer工具和网络选项卡，或者类似的工具，您将看到页面的内容首先加载，正如预期的那样，但是您必须等待外部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>


为什么不启动中的所有其他内容，然后在加载完成后使用$（“#加载”）.fadeIn（）
？
为什么不启动中的所有内容，然后在加载完成后使用$（“#加载”）.fadeIn（）
？
谢谢您的帮助。但结果是一样的。清除缓存并尝试刷新给定页面OK。我做到了。请清除缓存并重新加载给定页面。一切正常，但加载动画很快结束。它必须在整页加载后淡出。但它在加载时结束Kay，它完成了，现在它将完美地工作。加载页面时，您的内容将被隐藏。加载完成后，图像将淡出，您的网站内容将显示出来。请检查我的编辑。仔细阅读我最后的评论。加载动画在必须淡出之前很久就结束了。它在加载时结束，但在整页加载后必须淡出。我已经修复了这个问题。我把它改了，这样它就不会这样了。现在，加载栏淡入淡出的动画仅在文档已准备就绪时运行，以获取帮助。但结果是一样的。清除缓存并尝试刷新给定页面OK。我做到了。请清除缓存并重新加载给定页面。一切正常，但加载动画很快结束。它必须在整页加载后淡出。但它在加载时结束Kay，它完成了，现在它将完美地工作。加载页面时，您的内容将被隐藏。加载完成后，图像将淡出，您的网站内容将显示出来。请检查我的编辑。仔细阅读我最后的评论。加载动画在必须淡出之前很久就结束了。它在加载时结束，但在整页加载后必须淡出。我已经修复了这个问题。我把它改了，这样它就不会这样了。现在，仅当文档readyresult相同时，加载条淡入淡出的动画才会运行。清除缓存并尝试刷新给定的缓存page@L0rdDEVdem0rt是的，我看不出有什么变化。你有没有考虑过隐藏主要内容，这样它就不会像以前那样闪烁？背景图像现在在时间轴中的加载速度更快，并且是内联的，但是看起来其他元素也在加载。让主要内容在加载之前不以内联方式显示可能会有所帮助。只是个主意。我做到了。请清除缓存并重新加载给定页面。一切正常，但加载动画很快结束。它必须在整页加载后淡出。但它在loadingresult相同时结束。清除缓存并尝试刷新给定的缓存page@L0rdDEVdem0rt是的，我看不出有什么变化。你有没有考虑过隐藏主要内容，这样它就不会像以前那样闪烁？背景图像现在在时间轴中的加载速度更快，并且是内联的，但是看起来其他元素也在加载。让主要内容在加载之前不以内联方式显示可能会有所帮助。只是个主意。我做到了。请清除缓存并重新加载给定页面。一切正常，但加载动画很快结束。它必须在整页加载后淡出。但它在加载第一个文件时结束，因为我将实现“StickyFooter”。将所有div分组到新div中会把事情搞砸。其次，这不是个好主意，因为若客户端浏览器不支持，页面将不会加载js@L0rdDEVdem0rt如果客户端脚本不工作，您将遇到更大的问题，因为加载屏幕将位于所有内容之上。如果你要走这条路，全力以赴。那么stick footer呢？@L0rdDEVdem0rt如果不能在单个div中包装它，那么只需对所有必须在加载时显示的元素调用.fadeIn（），因此$（“#加载”）.fadeIn（）$（“页脚”）.fadeIn（）；或者是类似的，好的。是的