如何通過Ruby on Rails消除FOUC？

因此，當我在（https://notes-noted.herokuapp.com）處瀏覽我的應用程序時，我看到閃爍的無格式CSS。我鏈接到應用程序文件頭部的樣式表。我的頭部分看起來像這樣：如何通過Ruby on Rails消除FOUC？

!!! 
%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() { 
    }

任何人都可以推薦任何其他的解決方案，我已經在這裏試過了嗎？

來源

2016-04-28 Sapsford11

不知道錯字，但你的數據turbolinks軌道在那裏 – joewoodward

嗨一個空白，我試圖在代碼寫出來，並可能補充說，錯誤。不知道它爲什麼呈現它的方式。 – Sapsford11

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

來源

2016-04-28 18:07:17 Uzbekjon

我已經改變了代碼，但該網站似乎仍然在safari和chrome中顯示無風格的文本。這對你來說是一樣的嗎？ https://blooming-savannah-84310.herokuapp.com – Sapsford11

@ Sapsford11，抱歉，我在複製/粘貼時錯過了一些js代碼。更新了我的答案。關於您的網站字體。不，他們在鉻和Safari瀏覽器中看起來不錯。我在OSX上。 – Uzbekjon

隨着新代碼我認爲我已經解決了這個問題，除了一件事。當我從主頁登錄並使用瀏覽器後退按鈕時，我收到一個棘手的加載響應。新的網址在https://notes-noted.herokuapp.com – Sapsford11

如何通過Ruby on Rails消除FOUC？

回答

相關問題