Question

不太确定如何定义此问题。我刚开始使用jQuery和Javascript，几乎一切都很好，除了页面最初加载时。我有页面淡入，但看起来所有的CSS都没有被应用，直到jQuery加载。

我在Head标签中尝试了这个脚本，但它不起作用。帮助

<script type="text/javascript">
    $(function(){
       $('#box-container').hide();
    });
    $(window).load(function() {
       $("#box-container").show();
    });
</script>

哎呀：网站：http://www.elijahish.com

Answer 1

您应该使用Chrome控制台或Firefox Firebug等Javascript控制台来调试代码。

首先，在定义jQuery之前放置需要jQuery的script块：

<head>
<script type="text/javascript">
$(function(){
    $('#box-container').hide();
});
$(window).load(function() {
    $("#box-container").show();
});
</script>

...

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

...

因此，您会看到以下内容（在Chrome控制台中）：

ReferenceError: $ is not defined
    $(function(){

其次，您似乎正在尝试运行一个脚本，该脚本在DOM本身中看到之前访问（在第一个块中）一个元素（#box-container）。您可以在第一个块上使用jQuery.ready，但这可能会很混乱。我建议你在<div id="box-container">定义后立即放置它：

<body ...>

<div id="box-container" ...>
...
</div>
<script type="text/javascript">
(function($){
    $('#box-container').hide();
    $(window).load(function() {
        $("#box-container").show();
    });
})(jQuery);
</script>

演示：http://jsfiddle.net/5JpVB/4（我使用setTimeout获得戏剧效果。）

或者在<div ...>打开后直接放置：

<div id="box-container">
<script type="text/javascript">
(function($){
    $('#box-container').hide();
    $(window).load(function() {
        setTimeout(function(){
            $("#box-container").show();
        }, 2000);
    });
})(jQuery);
</script>
Box Container shown on window.onload.
</div>

http://jsfiddle.net/5JpVB/5/

coupdegrâce（document.write尽管如此）：

<head>
...
<script>
document.write('<style>#box-container{display: none;}</style>');
</script>
...
</head>

http://jsfiddle.net/5JpVB/2/

是的，这是一个将样式display: none“放入”标题的脚本，它“巧妙地”绕过了一些被抛出的猜想（每种方法的缺点，或多或少）。这种方法很优雅（当然，使用document.write除外，这是icky）。

另一种方法是使用CSS display: none方法：

<head>
...
<style>
#box-container {
    display: none;
}
</style>
...

<div id="box-container">
    <noscript><style>#box-container{display: block;}</style></noscript>
    Box Container shown on window.onload.
</div>

http://jsfiddle.net/5JpVB/3/（只需Result page，禁用Javascript以查看是否有效。）

Answer 2

您将收到FOUC的案例：http://www.bluerobot.com/web/css/fouc.asp/

而且，多年后我们仍然受到了骚扰！ http://paulirish.com/2009/avoiding-the-fouc-v3/

此链接包含各种解决方案。

您还可以在运行显示内容的JavaScript之前设置要隐藏的内容样式。 Jared向你展示了一个很好的方法。

Answer 3

我可能会建议你使用CSS和JavaScript的组合，而不是一个或另一个。我在我正在构建的网站上使用jQueryUI时遇到了同样的问题，并发现很多这些解决方案会使那些没有JavaScript的人无法使用该联系人。

所以这就是我所做的：

CSS：

.flash #wrapper {
     display: none;
}

这样做只会将<div id="wrapper">设置为隐藏，只要它是类flash的后代。因此，为了防止它被那些没有javascript的人隐藏，我将类flash添加到<html>元素。因此，只有在最终用户启用了JavaScript的情况下才能进行物理隐藏，否则他们至少可以通过未经停止的内容进行访问。

JavaScript的：

$('html').addClass('flash');
$(doctument).ready(function() {
     /* Do all your stuff */

     /* When done show the wrapper with the content stylized */
     $(#wrapper).show();
});

根据您的网页加载时间的不同，您可能会获得一些闪光，但它不会是一段非固定内容的闪光，相当难看。在我的情况下，我有一个jQueryUI菜单项，它将首先刷新普通<ul>元素然后刷新menuUI项，并使用jQuery调整我的<div>元素的大小，以便每个<div>列等于高，但它会首先闪现不同的高度。这修复了它，同时仍然可以访问没有启用脚本的浏览器。

JQuery搞砸了加载页面

3 个答案: