Question

因此，当我在（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() {
    }

有人可以推荐我在这里试过的编码以外的其他解决方案吗？

Answer 1

您的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() {}

如何使用Ruby on Rails消除FOUC？

1 个答案: