Javascript JQuery在加载时弄乱了页面_Javascript_Jquery_Html_Css

Javascript JQuery在加载时弄乱了页面

javascript jquery html css

Javascript JQuery在加载时弄乱了页面,javascript,jquery,html,css,Javascript,Jquery,Html,Css,不太清楚如何定义这个问题。我刚开始使用jQuery和Javascript，除了页面最初加载的时候，几乎所有的事情都很好。我已经将页面淡入，但看起来在jQuery加载之前，所有CSS都不会被应用我在我的头标签中尝试了这个脚本，但它不起作用。帮忙 <script type="text/javascript"> $(function(){ $('#box-container').hide(); }); $(window).load(function(

不太清楚如何定义这个问题。我刚开始使用jQuery和Javascript，除了页面最初加载的时候，几乎所有的事情都很好。我已经将页面淡入，但看起来在jQuery加载之前，所有CSS都不会被应用

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

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


$（函数（）{
$（“#盒子容器”）.hide（）；
});
$（窗口）。加载（函数（）{
$（“#盒子容器”）.show（）；
});

哎哟：网站：

你得到了一个FOUC案例：

而且，多年以后，我们仍然在抱怨

此链接包含多种解决方案

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

您将得到一个FOUC案例：

而且，多年以后，我们仍然在抱怨

此链接包含多种解决方案

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

您应该使用诸如Chrome控制台或Firefox Firebug之类的Javascript控制台来调试代码

首先，您要放置

脚本

块，该块在定义jQuery之前需要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>

...

<body ...>

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

其次，您似乎试图运行一个脚本，该脚本正在访问（在第一个块中）一个元素（

#box container

）。您可以在第一个块上使用

jQuery.ready

，但这可能会很混乱。我建议您将此项放在定义

之后：

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

...

<body ...>

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

还有政变（

document.write

nothing）：

（仅此而已，请禁用Javascript以查看其工作情况。）

您应该使用类似Chrome控制台或Firefox Firebug的Javascript控制台来调试代码

首先，您要放置

脚本

块，该块在定义jQuery之前需要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>

...

<body ...>

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

其次，您似乎试图运行一个脚本，该脚本正在访问（在第一个块中）一个元素（

#box container

）。您可以在第一个块上使用

jQuery.ready

，但这可能会很混乱。我建议您将此项放在定义

之后：

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

...

<body ...>

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

还有政变（

document.write

nothing）：

（仅此而已，请禁用Javascript以查看其工作情况。）

我是否可以建议您使用CSS和Javascript的组合，而不是一种或另一种。我在正在构建的网站上使用jQueryUI时也遇到了同样的问题，我发现很多这样的解决方案都会使那些没有JavaScript的人无法获得联系

以下是我所做的：

CSS:

这样做的目的是将

设置为隐藏，仅当它是flash类的一部分时。因此，为了不让没有javascript的人看到它，我将flash类添加到

元素中。因此，只有最终用户启用了JavaScript，它才能被物理隐藏，否则他们至少可以通过未序列化的内容进行访问

JavaScript:

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

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

根据你的页面加载时间的不同，你可能会得到一点闪光，但它不会是一个非序列化内容的闪光，这是相当丑陋的。在我的例子中，我有一个jQueryUI菜单项，它会先闪烁普通的

元素，然后闪烁menuUI项，我的元素会用jQuery调整大小，这样每个
列的高度相等，但它会先闪烁不同的高度。这解决了这一问题，同时仍然可以访问不支持脚本的浏览器。
我建议您使用CSS和JavaScript的组合，而不是一种或另一种。我在正在构建的网站上使用jQueryUI时也遇到了同样的问题，我发现很多这样的解决方案都会使那些没有JavaScript的人无法获得联系
以下是我所做的：
CSS:
这样做的目的是将
设置为隐藏，仅当它是flash类的一部分时。因此，为了不让没有javascript的人看到它，我将flash类添加到
元素中。因此，只有最终用户启用了JavaScript，它才能被物理隐藏，否则他们至少可以通过未序列化的内容进行访问
JavaScript:
$('html').addClass('flash');
$(doctument).ready(function() {
     /* Do all your stuff */

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

根据你的页面加载时间的不同，你可能会得到一点闪光，但它不会是一个非序列化内容的闪光，这是相当丑陋的。在我的例子中，我有一个jQueryUI菜单项，它会先闪烁普通的元素，然后闪烁menuUI项，我的元素会用jQuery调整大小，这样每个
列的高度相等，但它会先闪烁不同的高度。这解决了这个问题，同时仍然可以访问未启用脚本的浏览器。
您是否尝试在$（document）.ready（）中编写隐藏功能？是否有CSS@import正在进行？远离CSS问题，不要使用jquery.hide（）div，在CSS中隐藏它，显示：none；然后在jquery中显示它。@AliBassam-您遇到了另一个问题（尽管不太常见），禁用了JS的人什么也看不见。尝试过doc ready，没有效果。是的，我有@import，但是Chrome仍然有问题吗？你有没有尝试在$（document）.ready（）中编写隐藏功能？是否有CSS@import？远离CSS问题，不要使用jquery.hide（）div，在CSS中隐藏它，显示：无；然后在jquery中显示它。@AliBassam-您遇到了另一个问题（尽管不太常见），禁用了JS的人什么也看不见。尝试过doc ready，没有效果。是的，我有@import，但是这仍然是Chrome的bug吗？最好在这样的答案中提供至少一些链接到的答案。这一页可能会被移动或消失，否则这个答案在未来将变得毫无用处<代码>：）
我正在使用@import，b