删除未样式化内容的内容(FOUC) [英] remove flash of unstyled content (FOUC)
问题描述
此页面显示了轮播中的图像集合.该轮播由 jQuery无限轮播插件提供.目前，该插件以及调用它的JS代码已加载到<head>.
This page shows a collection of images in a carousel. The carousel is provided by the jQuery infinite carousel plugin. Currently, the plugin, and my JS code that calls it is loaded in the <head>.
在启动轮播代码之前，会有一堆未样式化的内容仅显示图像本身.我有什么办法可以防止这种情况发生，例如隐藏图像，直到转盘已初始化?
Before the carousel code kicks in, there's a flash of unstyled content that shows just the images themselves. Is there something I can do to prevent this, e.g. hide the images until the carosel has been initialised?
FOUC在IE中特别糟糕，但在Firefox中也会发生.
The FOUC is particularly bad in IE, but also occurs in Firefox.
推荐答案
如果在浏览器上禁用javascript，您将能够看到"flash"的外观.确保禁用JS的页面至少始终是可用的"是一个好主意.将此CSS添加到您的#carousel即可达到目的:
If you disable javascript on your browser, you'll be able to see what the "flash" looks like. It's a good idea to make sure a page is at least always "useable" with JS disabled. Adding this css to your #carousel will do the trick:
overflow: hidden;
width: 615px;
height: 270px;
border: 2px solid #aaa;
这篇关于删除未样式化内容的内容(FOUC)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
