隐藏页面，直到加载所有内容高级 [英] Hide page until everything is loaded Advanced

问题描述

我有一个大量使用jQuery的网页。

我的目标是只在一切准备就绪时显示页面。

有了这个我想避免向用户显示烦人的页面呈现。

到目前为止我试过这个（＃ body_holder 是 body 中的包装器：

  $（function（ ）{
 $（'＃body_holder'）。hide（）; 
}）; 
 $（窗口）.load（function（）{
 $（＃body_holder）。show（）; 
}）; 
  

这完全没问题，但会弄乱布局。

问题是隐藏包装器会干扰其他jQuery函数和使用的插件（例如layout-plugin）。

所以我想还有另外一个技巧要做到这一点。在发生window.load之前，可能会在身体上放置一张图片或div？

你使用什么方法？

<编辑：

解决方案最有可能是 display：none 或 hide（）;

解决方案

使用jQuery做的任何事情通常都要等待文档。准备好了，这已经太晚了恕我直言。

把div放在最上面，如下：

 < div id =cover>< / div> 
  

设置一些样式：

  #cover {position：fixed;身高：100％;宽度：100％;顶部：0;左：0;背景：＃000; z-index：9999;} 
  

并在加载所有元素时用JS隐藏它：

  $（窗口）.on（'load'，function（）{
 $（＃cover）。hide（ ）; 
}）; 
  

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

  $（window）.on（'load'，function（）{$（＃cover）。fadeOut（200）;}）; // stackoverflow不会正确触发窗口onload，替换with fake loadfunction newW（）{$（window）.load（）;} setTimeout（newW，1000）;  

  #cover {position：fixed;身高：100％;宽度：100％;顶部：0;左：0;背景：＃000;的z-index：9999; font-size：60px; text-align：center; padding-top：200px;颜色：#fff;}  

 < script src = https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script><ul> <李>这< /锂> <李>为< /锂> <李>一种与LT; /锂> <李>简单< /锂> <李>试验< /锂> < /立GT上述<李> <李>一种与LT; /锂> < li>封面< / li>< / ul>< div id =封面> LOADING< / div>  

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 page rendering to the user.

I tried this so far (#body_holder is a wrapper inside body):

$(function(){
    $('#body_holder').hide();
});
$(window).load(function() {
    $("#body_holder").show();
});

This works completely fine, but messes up the layout.

The problem is that hiding the wrapper interferes with the other jQuery functions and plugins used (eg layout-plugin).

So I guess there must be another trick to do this. Maybe lay a picture or div over the body until window.load has occurred?

What approaches do you use?

EDIT:

The solution most likely has to be another way than display:none or hide();

解决方案

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>

这篇关于隐藏页面，直到加载所有内容高级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！