Javascript jquery加载时间和其中的css样式_Javascript_Jquery

Javascript jquery加载时间和其中的css样式

javascript jquery

Javascript jquery加载时间和其中的css样式,javascript,jquery,Javascript,Jquery,正如您在下面的代码中所看到的，jquery加载了一个页面，但是jquery中的所有.css样式似乎都要等到jquery加载之后，如果文件很大，这可能需要几秒钟的时间。因此，如果我有.css（“display”，“none”），它将无法在该时间内工作，从而在样式启动之前导致闪烁。我只有Mozilla有这个问题下面的代码只是一个示例，它很好地工作，因为它很小。如何解决这个问题 $（文档）.ready（函数（）{ $（“.rectangle”）。单击（函数（）{ $（“body”）.load（“de

正如您在下面的代码中所看到的，jquery加载了一个页面，但是jquery中的所有.css样式似乎都要等到jquery加载之后，如果文件很大，这可能需要几秒钟的时间。因此，如果我有.css（“display”，“none”），它将无法在该时间内工作，从而在样式启动之前导致闪烁。我只有Mozilla有这个问题下面的代码只是一个示例，它很好地工作，因为它很小。如何解决这个问题

$（文档）.ready（函数（）{
$（“.rectangle”）。单击（函数（）{
$（“body”）.load（“debugging2.html”，function（）{
$（“.rectangle”）.css（“显示”、“无”）
$（“.rectangle”）.fadeIn（1000）；
})	;								
});
})

.rectangle{
高度：200px；
宽度：200px；
背景色：#000；
}

$（文档）.ready（函数（）{
$（“.rectangle”）。单击（函数（）{
$（“head”）.append（“.rectangle{display:none；}”）；
$（“body”）.load（“debugging2.html”，function（）{
$（“矩形”）.fadeIn（1000）；
});                             
});
})

由于脚本标记是同步加载的（默认情况下），因此它们确实会阻止页面呈现。如果HTML未被处理，并且此时未加载样式，则可能会导致空白的未设置样式的页面。因此，常见的非常简单的解决方案是将繁重的脚本标记移动到

的最末端，并在

中添加必要的CSS样式

如上所述，CSS首先被下载，在HTML被快速加载、呈现和样式化之后，并且只有在缓慢的脚本被下载之后

在代码中，它将如下所示：

<head>
  <link href="style.css" rel="text/css" type="stylesheet">
</head>
<body>
  <div>  
    <div class="rectangle"></div>
  </div> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- some other scripts -->
</body>

作为奖励，您不再需要绑定到document ready事件（

$（document）.ready（function（）{}）；

），因为在执行脚本时，默认情况下HTML都是加载的。

在头中放置样式，在关闭body tag.thx mate之前使用jquery，这真是太糟糕了。@dfsq请将您的评论作为答案重新发布，以便可以对其进行投票和接受。此代码的问题是，在加载页面之前，类矩形将不在那里（您希望更改加载页面的css，而不是当前页面的css）。请参阅修改后的答案，也许这对你来说是可行的。同样的默认css在以前也起作用，解决方案很简单：“在head中放入样式，在关闭body标记之前放入jquery。“我在正文末尾之前已经有了我的.js文件，你是说我也把谷歌的最小化jquery cdn移到了那里？

<head>
  <link href="style.css" rel="text/css" type="stylesheet">
</head>
<body>
  <div>  
    <div class="rectangle"></div>
  </div> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- some other scripts -->
</body>