0

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

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

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

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

4

3 回答 3

5

您应该使用 Javascript 控制台（例如 Chrome 控制台或 Firefox Firebug）来调试您的代码。

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

<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(){

其次，您似乎正在尝试运行一个脚本，该脚本正在访问（在第一个块中）一个元素（#box-container），然后才在 DOM 本身中看到它。您可以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（我使用 asetTimeout来获得戏剧效果。）

<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/

和致命一击（document.write尽管如此）：

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

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

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

还有另一种方式，使用 CSSdisplay: 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/（只是结果页面，禁用 Javascript 以查看它的工作。）

于 2013-01-27T17:33:29.793 回答
1

你得到一个 FOUC 的案例：http: //www.bluerobot.com/web/css/fouc.asp/

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

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

您还可以在运行显示内容的 javascript 之前将内容的样式设置为隐藏。Jared 向您展示了一个很好的方法来做到这一点。

于 2013-01-27T17:22:01.140 回答
0

我是否可以建议您使用 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 项，并且我的<div>元素使用 jQuery 调整大小，以便每<div>列的高度相等，但它会首先闪烁不同的高度。这修复了它，同时仍然为没有启用脚本的浏览器提供可访问性。

于 2013-02-01T16:38:08.650 回答