且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

预加载@字体脸字体停止Firefox闪烁/延迟

更新时间:2023-02-26 08:58:23

Firefox在Firefox中打败FOUT:
Firefox开始重新渲染AFTER窗口的文本。加载事件。
所以我所做的就是隐藏像Paul Irish那样的内容,但是在window.load之后,我仍然等待200毫秒(给FF时间以进行真实渲染),然后显示这个页面。



我的网站有很多图片,所以为了加快速度,我首先发送的页面全部没有内容,然后用ajax调用获取内容。
这是很多工作来满足FF,但结果是好的。

这是我的保罗爱尔兰变种,注意我使用负文字缩进至少布局速度更快:

 < script> 
(function(){
var d = document,e = d.documentElement,s = d.createElement('style');
if(e.style.MozTransform ===' '){// gecko 1.9.1 inference
// s.textContent ='body {visibility:hidden}';
s.textContent ='body {text-indent:-9999px}';
e.firstChild.appendChild(s);
函数f()
{
var ffrendertime = setTimeout(function(){s.parentNode&& s.parentNode.removeChild (s)},200);
}
addEventListener('load',f,false);
setTimeout(f,2000);
}
}) ();
< / script>


I've been reading the posts about this, and still can't find the answer. Has anyone figured out how to preload the fonts to stop the flicker/delay?

Cheers. Erik

Fighting the FOUT in Firefox : Firefox starts re - rendering the text AFTER window.load event. So what I did is hide the content like Paul Irish does, but AFTER window.load I still wait 200 millisec (to give FF time for the real rendering), and then show the page.

My site has a lot of images, so to speed this up, I first send the page allmost without content, and then get the content with an ajax call. That's a lot of work to satisfie FF, but the results are good.

This is my paul irish variant, note I use negative text-indent in stead of visibility to serve the visitor at least the layout faster:

    <script>
    (function(){
  var d = document, e = d.documentElement, s = d.createElement('style');
  if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
   // s.textContent = 'body{visibility:hidden}';
    s.textContent = 'body{text-indent:-9999px}';
    e.firstChild.appendChild(s);
    function f()
    { 
    var ffrendertime = setTimeout ( function(){s.parentNode && s.parentNode.removeChild(s)} , 200 ); 
    }
    addEventListener('load',f,false);
    setTimeout(f,2000); 
  }
})();
    </script>