因此,当我在 ( https://notes-noted.herokuapp.com) 浏览我的应用程序时,我看到了无样式 CSS 的闪烁。我正在链接到应用程序文件头部的样式表。我的头部部分看起来像这样:
!!!
%html
%head
%title Noted | Online Notebook Application
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks- track' => true
= javascript_include_tag 'application', 'data-turbolinks-track' => true
%link{:rel => "stylesheet", :href => "//opensource.keycdn.com/fontawesome/4.6.1/font-awesome.min.css"}/
= csrf_meta_tags
%style
type="text/css"
.fouc { display:none; }
%script
type="text/javascript"
try {
var html=document.getElementByName("html");
document.addEventListener("DOMContentLoaded", function(event) { html.class=""; });
html.class="fouc";
}
catch() {
}
除了我在这里尝试过的编码之外,任何人都可以推荐任何解决方案吗?
最佳答案
您的 HAML 中有错误。您错误地渲染了您的样式和 js。
%style
type="text/css"
.fouc { display:none; }
%script
type="text/javascript"
这应该是:
:css
.fouc { display:none; }
:javascript
try {
var html=document.getElementByName("html");
document.addEventListener("DOMContentLoaded", function(event) { html.class=""; });
html.class="fouc";
} catch() {}
关于css - 如何使用 Ruby on Rails 消除 FOUC?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36921094/