【讨论】页面加载先后顺序（图片、样式、文字。。。。。）包括(div和table优点)

fengjiafeng1984 2009-02-18 03:57:49

【讨论】
1.页面加载先后顺序（图片、样式、文字。。。。。）,怎么更好的控制.

2.div和table加载优缺点.

3：页面怎么知道一项数据加载完毕。eg:页面没有完全加载完之前我用，一张图片代替，当加载完毕后，显示页面。但是怎么判断页面加载完毕了。

...全文

1533 22 打赏收藏转发到动态举报

写回复

用AI写文章

22 条回复

切换为时间正序

请发表友善的回复…

发表回复

foxmail 2009-10-11

打赏
举报

谁能帮我看看http://www.llk.cn/theme/Sail.shtm 这个页面是不是加载顺序有问题，感觉怪怪的？

junyi2003 2009-03-25

打赏
举报

1. 先看HTML代码书写顺序的。先Load Html Header中的元素。除非超时，后Load Body 图片及其他文件。所以一般CSS/JS都在Header中加载。
2. Div是用来布局的， Table大多是显示数据项的

w4lytx 2009-03-24

打赏
举报

monkey936486 2009-03-20

打赏
举报

HTML要从上到下解析不存在图片,文字等的先后顺序在上面的先解析下面的后解析
DIV和TABLE不用说肯定是DIV+CSS布局要好一些最起码结构清晰不维护起来也方便
判断页面加载完毕可以通过判断页面最后一个元素实现（只是推测）

「已注销」 2009-03-20

打赏
举报

教条一下：当装载受影响的页面时，在最终显示样式之前，页面暂时以无样式的形式显示，这个Bug称为"Flash of Unstyled Conten"(简称为FOUC)bug,在文档头中放一个Link或者Script元素可以避免这种bug。
---------------摘自《CSS Mastery》
在给你一个比较详细的FOUC资料：http://www.cheshirecat.cn/web-standards/11.htm：

对于Flash of Unstyled Content (FOUC)的中文译名,常用的为文档样式短暂失效,是指使用import方法导入样式表时,出现在Windows IE下的一种现象.
原文链接http://www.bluerobot.com/web/css/fouc.asp

译文:
什么是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>

sxdtmk 2009-03-12

打赏
举报

sdtshan 2009-03-12

打赏
举报

友情up

skyaspnet 2009-03-11

打赏
举报

学习

ZeekerLin 2009-03-11

打赏
举报

[Quote=引用 1 楼 wangsuwen 的回复:]

document.onreadystatechange=function()
{
if (document.readyState=="complete") {
//do things.
}
}

[/Quote]
图片是否显示完成是有状态可以直接判断的，如1楼的回复，判断document.all.imgobject.readyState的
返回值，样式和文字嘛可以写在一个div里，方便控制这样就可以根据图片的是否加载好显示div里面的内容。
判断页面是否加载完毕，可以根据你需要显示的东西是否已经显示完成，可以用JS的定时器做判断来实现，
大概思路是，先定义一个全局变量，当你需要的东西出现后改变这个变量，创建一个定时器实时监测这个变量的值，当这个变量的值编程预期的值后就执行某一段函数，实现页面上的一些改变，再删除这个定时器。如
//创建定时器
var interval = setInterval("getReadResult()", 2000);
function getReadResult(){
var result = VRoadVideo_Control.GetReadResult();
//alert(result);
if(result == 1 || result == 2){
alert('视频文件下载成功!');
playMovie();
clearInterval(interval);
}else if(result == 3){
alert("网络连接失败！");
clearInterval(interval);
document.getElementById("initcontext").style.display = "none";
document.getElementById("fail").style.display = "";
}else if(result == 4){
alert("请求的视频文件不存在！");
clearInterval(interval);
document.getElementById("initcontext").style.display = "none";
document.getElementById("fail").style.display = "";
}
}

wwb82954323 2009-03-10