页面加载后Javascript和Css加载

在你访问网站之前，我希望你也能找到它。你会注意到，当网站加载时，第一或第二......它以列表格式显示导航栏中的链接，并看起来越野车...... BC完成加载后看起来没问题。页面加载后Javascript和Css加载

网站：www.powerliftingbasics.com 每次刷新/加载页面时都会发生这种情况。我使用twitter bootstrap在轨道上使用红宝石。我无法弄清楚。

这里是我的导航栏代码：

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
      <a href="/" class="navlogo pull-left"><img src="assets/logosmall.png" alt="Small Logo"></a> 
      <a class="brand navfont" href="/">Powerlifting Basics</a> 
     <div class="container nav-collapse"> 
     <ul class="nav pull-right"> 
      <li><%= link_to "Bench Press", "/benchpress" %></li> 
      <li><%= link_to "Deadlift", "/deadlift" %></li> 
      <li><%= link_to "Squat", "/squat" %></li> 
      <li><%= link_to "Equipment", "/equipment" %></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"> more<b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li class="divider"></li> 
        <li><%= link_to "Subscribe", "/subscribe" %></li> 
        <li><a href="mailto:[email protected]"> Contact Us</a> </li> 
       </ul> 
      </li> 
     </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
    </div> 
</div>

来源

2012-09-09 coldRespect

你除其他事项外HTML包含倍数''和''，所以你应该开始[检查你的网页有效性（w3.org）]（http://validator.w3.org/check?uri=http%3A%2F%2Fwww.powerliftingbasics.com） – Sherbrow

为什么投票的问题，我搜索了一个回答很长时间 – coldRespect

在你的布局/ application.html.erb 添加application.css和application.js中顶部

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
    <title>PowerLiftingBasics</title> 
    <%= stylesheet_link_tag "application" %> 
    <%= javascript_include_tag "application" %> 
    </head> 
    <body> 

    <%= yield %> 

    </body> 

</html>

来源

2012-09-09 10:18:03 AnkitG

在关闭之前将'<％= javascript_include_tag“应用程序”％>'身体标签。你的页面渲染速度会更快。 –

太棒了！这正是我期待的！谢谢！非常感谢！为什么选择这个问题的投票？ – coldRespect

接受答案，如果它帮助你.. – AnkitG

-1

它发生的原因您放置链接到你的CSS文件在页面底部。您应该在页面正文之前加载它。至少，把

<link href="/assets/application-65943938be14c000984bcb9478d30563.css" media="all" rel="stylesheet" type="text/css">

里面<head></head>标签。

最佳做法是将css和favicon链接放在页面头部。 Javascripts链接地方的底部（关闭</body>标签之前）。

来源

2012-09-09 09:45:21

我们绝不会将CSS和JavaScript与您附加的fingerprinting/md5组合相加。 'rake资产：预编译'是否可以完成插入唯一指纹的工作 – AnkitG

您是否真的了解资产编译后的html和erb模板之间的区别？ ;） –

是的，我很好做..因为这个人正在轨道上工作，所以他应该知道erb和预编译：D :) – AnkitG

页面加载后Javascript和Css加载

回答

相关问题