刪除未格式化內容的閃光（FOUC）

This page顯示旋轉木馬中的圖像集合。傳送帶由jQuery infinite carousel plugin提供。目前，插件和調用它的JS代碼都被加載到<head>中。刪除未格式化內容的閃光（FOUC）

在旋轉木馬代碼開始之前，會有一段未顯示的內容僅顯示圖像本身。有什麼我可以做，以防止這種情況，例如隱藏圖像直到carosel被初始化？

FOUC在IE中尤其糟糕，但也出現在Firefox中。

2012-02-17 Dónal

如果您在瀏覽器上禁用了JavaScript，您將能夠看到「閃存」的外觀。在禁用JS的情況下確保頁面至少始終「可用」是一個不錯的主意。將這個CSS添加到你的#carousel將做的伎倆：

overflow: hidden; 
width: 615px; 
height: 270px; 
border: 2px solid #aaa;

2012-02-17 14:49:28

你可以在CSS的內容設置display:none，然後在短短的旋轉木馬代碼踢之前用JavaScript將其刪除。

2012-02-17 14:24:30

恐怕這不是真正的漸進式增強。如果你使用'display：none'來設計它，並且出於任何原因用戶禁用了js，他們什麼也看不到。只有啓用了js，才能更好地使用「js-on」類等技術來隱藏內容，直到構建傳送帶 – Luca 2014-11-28 17:26:28

回答