Flash of Unstyled Content (FOUC)(这个一直困惑我的迷)

什么是FOUC(文档样式短暂失效)?

如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这似乎不可想象,我将这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC.

因为这种奇怪的现象似乎只会在Internet Explorer中出现,我们尝试得出一个结论,很显然这是IE的一个问题.我不打算继续探讨这个结论.对我来说,我也不清楚是否FOUC只会给那些非W3C推荐的客户端带来困扰.尽管我不能代表W3C说些什么,但是我期待Internet Explorer能够对文档样式短暂实效进行深层次的发掘和研究.

我如何能看到FOUC?


首先,你需要使用Windows版本的IE(版本5或更高级的版本),其次,你需要找到一个能够展示FOUC现象的页面,你不需要再去搜索了,这个页面就是个好例子.
在这里,提示很重要的一点.如果导入的样式表存在于IE的缓存(也称为IE临时文件)中,页面内容的瞬间无样式闪现将不会出现.出于测试目的,在测试FOUC页面之前需要删除IE临时文件,如果你不确认如何进行的话,你可以查看微软提供的相关在线帮助.下面我给出测试FOUC的建议步骤:
1 使用IE5+/Win载入测试的FOUC页面,这个页面就是绝好的例子;
2 载入一个不同的页面,在这个步骤中,你选择哪个页面并不是重要的,只要它不和你所测试的页面共享文件,最好选择一个不同网站的页面;
3 删除IE临时文件;
4 点击后退按钮返回你要测试的页面
5 查看文档样式短暂失效现象

注意一些因素,例如运行迟缓的电脑和网络设备缓存能力,可能会降低显示内容瞬间无样式闪烁的几率.

如何解决FOUC


只需要在文档的head元素中添加一个link元素或者添加script元素就可以防止FOUC的发生.

基础head 元素
出于比较目的,下面的是出现FOUC的基本head元素内容
测试此基础head元素显示FOUC现象

    <head>
    <title>My Page</title>
    <style type=”text/css” media=”screen”>@import “style.css”;</style>
    </head> 

link元素解决方案


在基础的head元素中添加link元素可能是最合适的解决方案,这是因为添加一个alternate样式表 或 media-dependent 样式表对每个页面来说都会有好处.我推荐这种方法,由于这样既可以阻止FOUC现象的发生,同时也可以给页面带来一些提升,例如可用性,可访问性或者其他热门词.当然,如果你添加的link元素所添加的是一个空样式表的话也是可以的,但是这将是多大的浪费.

测试link元素解决方案处理后的FOUC页面

    <head>
    <title>My Page</title>
    <link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” mce_href=”print.css”>
    <style type=”text/css” media=”screen”>@import “style.css”;</style>
    </head> 

script元素解决方案


添加script元素也是一种有效的解决方案,尽管如此,这种方法在某些情况下看起来是那么不自然,例如,我觉得没有任何脚本可以提升页面.我可以添加空白的script元素到head元素中,但是这样似乎感觉和hack一样糟糕.这种情况下,可以选择link元素解决方案.
我提及一下,script元素不一定非要添加到head元素中,但是需要在body元素内容之前填写这个标签,因此可以将script元素防止在body中,但是一定要置于可视内容之前,也是有效的.
测试script元素解决方案处理后的FOUC页面

    <head>
    <title>My Page</title>
    <script type=”text/javascript”> </script>
    <style type=”text/css” media=”screen”>@import “style.css”;</style>
    </head> 


展开阅读全文

一直困惑我的GDI问题

09-10

请看代码:rnrn代码:rnCDC mdc;//全局变量rnvoid ok()rnrn CBitmap mBm;rn CDC *pview=this->GetDC();//得到窗口DC指针rn mdc.CreateCompatibleDC(pview);//创建一兼容DCrn mBm.CreateCompatibleBitmap(pview,200,200);//创建一位图rn mdc.SelectObject(&mBm);//选入位图rn/*rn这样mdc便可以使用了,可以在其上面绘图。。。rn我可以这样理解??????rn 当函数结束的时候mBm会析构,但它已经被选入mdc,所以对应的句柄并没有被删除rn这样才能在mdc中接着使用rn*/rnrn如果把上面代码改成这样:rnrnvoid ok()rn rn CDC mdc;//局部变量rn CBitmap mBm;rn CDC *pview=this->GetDC();//得到窗口DC指针rn mdc.CreateCompatibleDC(pview);//创建一兼容DCrn mBm.CreateCompatibleBitmap(pview,200,200);//创建一位图rn mdc.SelectObject(&mBm);//选入位图,但并没有保存SelectObject()返回的指针,也就不会恢复rn/*rn这样mdc便可以使用了,可以在其上面绘图。。。rnrn我可以这样理解??????????rn 当函数结束的时候mBm会先析构,但它已经被选入mdc没有被选出,所以析构时rn对应的句柄并没有被删除(资源不会被释放)rn mBm析构后是mdc析构(调用DeleteDC),DeleteDC不会删除被选入其中的GDI对象rn所以mBm的句柄还是没有被释放rn 如果把创建变量的顺序改变一下:rn CBitmap mBm;rn CDC mdc;//局部变量rn这样会先析构mBm再析构mdc就没有问题了rn*/rn 论坛

这个下拉效果一直困惑.求解

12-04

为什么我加了add(e).preventDefault();还是会有默认的事件呢?rn另外..rnvar slider = $("slider").offsetHeight - $("slider_btn").offsetHeight;rnvar list = $("box").offsetHeight - $("list").offsetHeight;rnvar result = list / slider;//这里为什么要除以?rn我的数学好差啊rn[code=HTML]rnrn rn scrollrn rnrn rnrnrn rn dsfdsfdsfrnrn rn rn 住建部:地方住房限购令到期后需延续rn 卫生部称百姓餐桌上乳品标准只高不低rn 台湾地区领导人选举举行首次电视辩论rn 全国明日起将迎来大范围雨雪降温rn 欧航局放弃联系搭载中方萤火一号的火星探测器rn 住建部:地方住房限购令到期后需延续rn 卫生部称百姓餐桌上乳品标准只高不低rn 台湾地区领导人选举举行首次电视辩论rn 全国明日起将迎来大范围雨雪降温rn 欧航局放弃联系搭载中方萤火一号的火星探测器rn 住建部:地方住房限购令到期后需延续rn 卫生部称百姓餐桌上乳品标准只高不低rn 台湾地区领导人选举举行首次电视辩论rn 全国明日起将迎来大范围雨雪降温rn 欧航局放弃联系搭载中方萤火一号的火星探测器rn 住建部:地方住房限购令到期后需延续rn 卫生部称百姓餐桌上乳品标准只高不低rn 台湾地区领导人选举举行首次电视辩论rn 全国明日起将迎来大范围雨雪降温rn 欧航局放弃联系搭载中方萤火一号的火星探测器rn rn rn rn rn rn rnrn rn rn[/code] 论坛

一直困惑我的问题PB和mysql???

05-14

Mysql数据库rnCREATE TABLE xinwen_xinxi (rn id int auto_increment not null,rn leibieid int not null,rn biaoti varchar(200) not null,rn laiyuan varchar(100) not null,rn tianjiasijian int not null,rn dianjisu int default 0,rn tupiandizi varchar(200) default '',rn xiangguanlianjie varchar(200) default '',rn xiansifangsi char default '1',rn tupianxinwen tinyint default 0,rn neirong text not null,rn PRIMARY KEY (id),rn key (biaoti(10)),rn key (leibieid) rn); rn以上这是新闻信息的表结构其中id是自动增加int类型rn我在PB脚本中作如下引用:rnlong leibieid,tupianxinwen,tianjiasijianrnstring biaoti,laiyuan,tupiandizi,xiansifangsi,neirong,xiangguanlianjiernxinwenidtmp=dw_1.getitemdecimal(dw_1.getrow(),"xinwenid")rnrn SELECT xinwen_xinxi.leibieid, rn xinwen_xinxi.biaoti, rn xinwen_xinxi.laiyuan, rn xinwen_xinxi.tianjiasijian, rn xinwen_xinxi.tupiandizi, rn xinwen_xinxi.xiangguanlianjie, rn xinwen_xinxi.xiansifangsi, rn xinwen_xinxi.tupianxinwen, rn xinwen_xinxi.neirong rn INTO :leibieid, rn :biaoti, rn :laiyuan, rn :tianjiasijian, rn :tupiandizi, rn :xiangguanlianjie, rn :xiansifangsi, rn :tupianxinwen, rn :neirong rn FROM xinwen_xinxi rn where id = :xinwenidtmp;rnmessagebox("xinwe",biaoti)rn测试让其输出biaoti字段的值,但是,当id<=9的时候可以正确的输出biaoti值,如果rnid>9时候则,没有任何输出。rn我都晕了,也不知道为什么?rn请大家帮我看看,感激不尽……rn 论坛

没有更多推荐了,返回首页