浏览器显示短时间没有样式的页面(视觉故障) [英] Browser displays page without styles for a short moment (visual glitch)

查看:165
本文介绍了浏览器显示短时间没有样式的页面(视觉故障)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我观察到,很少,Internet Explorer(7或8,没有关系)显示我们的网页( www.epsitec.ch )短时间内不应用CSS。布局显示完全中断,一切顺序从上到下显示。当页面加载完成后,一切都会正常显示。

I have observed that, very infrequently, Internet Explorer (7 or 8, it does not matter) displays our web pages (www.epsitec.ch) a short time without applying the CSS. The layout appears completely broken, with everything displayed sequentially from top to bottom. When the page has finished loading, everything finally gets displayed properly.

我们的网页不使用任何奇特的脚本,只有两个javascript包括QuantCast和Google Analytics页面的结尾。顺便说一句,我们已经在添加QuantCast脚本之前遇到了问题。 CSS在< head> 部分中链接:

Our web pages do not use any fancy scripting, just two javascript inclusions for QuantCast and Google Analytics, done at the end of the page. By the way, we already had the issue before adding the QuantCast script. The CSS gets linked in the <head> section:

<head>
  <title>Crésus Comptabilité</title>
  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="http://www.epsitec.ch/favicon.ico" />
  <link href="../../style.css" rel="stylesheet" type="text/css" />
  ...
</head>

,然后按照静态HTML直到包含JavaScript的最终块:

and then follows static HTML up to the final chunk which includes the JavaScript:

    ...
    <div id="account">
      <a class="deselect" href="/account/login">Identifiez-vous</a>
      <script type="text/javascript">
        _qoptions={qacct:"..."};
      </script>
      <script type="text/javascript" src="http://edge.quantserve.com/quant.js">
      </script>
      <noscript>
        <img src="..." style="display: none;" border="0" height="1" width="1"/>
      </noscript>
    </div>
    <div id="contact">
      <a href="/support/contact">Contactez-nous</a>
    </div>
    <div id="ending"><!-- --></div>
  </div>
  <script type="text/javascript">
    ...
  </script>
  <script type="text/javascript">
    var pageTracker = _gat._getTracker("...");
    pageTracker._initData();
    pageTracker._trackPageview();
  </script>
</body>

由于这是一个非常短的视觉故障,我不知道是什么引起的。更糟的是,我不能复制它,它只出现在很少的场合。如何进一步调查毛刺的原因?是否有任何我应该注意的最佳做法?

As this is a very short visual glitch, I have no idea what provokes it. Worse, I cannot reproduce it and it appears only on seldom occasions. How can I further investigate the cause of the glitch? Are there any best practices I should be aware of?

推荐答案

这被称为 FOUC ,一个非定制内容的Flash,并且有详细的文档和解释: http://www.bluerobot.com/web/css/fouc.asp/

This is called a FOUC, a Flash Of Unstyled Content, and is well documented and explained here: http://www.bluerobot.com/web/css/fouc.asp/

这篇关于浏览器显示短时间没有样式的页面(视觉故障)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆