{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Anthone 的问题《remove flash of unstyled content (FOUC)》','https://www.manongdao.com/q-960357.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
The FOUC is particularly bad in IE, but also occurs in Firefox.
You could set
display:nonein the css for the content and then remove it with javascript just before the carousel code kicks in.And remember to stick to Progressive enhancement.
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: