如何控制HTML中DIV的加载顺序
转载 http://bbl456.blog.sohu.com/72162079.html
目前网站之间相互调用的情况越来越多，比如 需要调用某个第三方提供的一些接口（天气预报），或者是第三方提供的广告......
但是出于各种原因（网络故障、服务器故障、软件故障......）常常会发生第三方的相应页面不能访问的情况，而直接导致自己网站不能正常访问，或者访问速度比较慢。
比如：某个网站为头、内容、底 结构，在网站的头部放置了第三方提供的广告，但是出于某种原因，第三方的服务不能正常访问了，直接导致的情况就是，整个网站 头部广告 以下的部分均不能正常访问（或者要过很久以后才能打开，昨天的台湾大地震，导致了 Google Adsense 不能正常访问，直接导致了我的个人网站 http://www.oldtool.net 不能正常打开。）。
为了解决如上的问题，查阅了很多文章后，找到如下的解决方案：页面的延时加载（Page Delay Load）。
在IE中，几乎每个对象（div iframe td ...）均有一个属性 readyState(http://msdn2.microsoft.com/en-us/library/ms534358.aspx) ，此属性反应对象在当前页面的载入状态，当该对象完全载入以后，则当前对象的 readyState=="complete" ，借助该属性，可以控制待当前页面最期待的内容载入完成以后，再载入有可能出错的页面（或者是优先级不高的页面）。
详细代码如下：
问题页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>精巧软件 www.oldtool.net</title>
</head>
<body>
<div>这里是页面的最顶端内容。</div>
<div>如下的 div1 div2 div3 div4 可以放置任何第三方的内容，比如广告。</div>
<div id="div1" style="width:200px;height:40px;border:1px solid red;">inner html 1</div>
<div>说明：此处的 宽、高，不一定需要提前设置，可以将此 Container 的宽、高根据内部的内容自适应。</div>
<div id="div2" style="width:200px;height:40px;border:1px solid red;">inner html 2</div>
<div>说明：div3中的内容不能正常访问，直接导致其下最重要的内容不能正常打开，或者要过很久以后才可以正常打开。</div>
<div id="div3" style="width:200px;height:40px;border:1px solid red;">
<!-- Google Adsense -->
<script type="text/javascript"><!--
google_ad_client = "pub-wrongcode";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel = "";
//--></script>
<script type="text/javascript" src="http://wrongcode.wrongcode.com/pagead/wrongcode.js">
</script>
<!-- Google Adsense -->
</div>
<div id="div4" style="width:200px;height:40px;border:1px solid red;">inner html 4</div>
<div>这里是页面最重要的内容，您每次打开该页面，均希望该部分内容无论如何可以正常显示。</div>
<div>这里是页面的最底端</div>
</body>
</html>
修复页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>精巧软件 www.oldtool.net</title>
</head>
<body>
<script language="javascript" type="text/javascript">
// 按照 期望的次序 排列每个 div 的 Id.
var arr1=new Array("div3","div2","div4","div1");
//var arr1=new Array("if3","if2","if4","if1");
// 期望 次序 div 中的内容.
var arr2=new Array("换成你期望的内容。","inner html 2","inner html 4","inner html 1");
//var arr2=new Array("3.html","2.html","4.html","1.html");
// 期望 次序 中 iframe 的状态.
var arr3=new Array("false","false","false","false");
function showState()
{
// 判断 当前页面是否载入完毕
if(window.document.body.readyState=="complete")
{
for(i=0;i<arr1.length;i++)
{
if(arr3[i]=="false")
{
document.getElementById(arr1[i]).innerHTML=arr2[i];
arr3[i]="true";
return ;
}
}
}
}
// 每间隔 2 秒后调用如上方法, 当然,正常应用应该将此时间间隔设置小一些, 此处 仅 为了方便大家看效果
setInterval("showState()",2000);
</script>
<div>这里是页面的最顶端内容。</div>
<div>如下的 div1 div2 div3 div4 全部延时加载。 当前页面中的最重要内容不会因 div1 div2 div3 div4 内容的损坏，而不能正常访问。</div>
<div id="div1" style="width:200px;height:40px;border:1px solid red;">loading...</div>
<div id="div2" style="width:200px;height:40px;border:1px solid red;">loading...</div>
<div id="div3" style="width:200px;height:40px;border:1px solid red;">loading...</div>
<div id="div4" style="width:200px;height:40px;border:1px solid red;">loading...</div>
<div>这里是页面最重要的内容，您每次打开该页面，均希望该部分内容无论如何可以正常显示。</div>
<div>这里是页面的最底端</div>
</body>
</html>
如何控制HTML中DIV的加载顺序相关推荐
- 如何正确控制springboot中bean的加载顺序总结
1.为什么需要控制加载顺序 springboot遵从约定大于配置的原则,极大程度的解决了配置繁琐的问题.在此基础上,又提供了spi机制,用spring.factories可以完成一个小组件的自动装配功 ...
- Java 类中各成分加载顺序和内存中的存放位置
一.什么时候会加载类? 使用到类中的内容时加载:有三种情况 1.创建对象:new StaticCode(); 2.使用类中的静态成员:StaticCode.num=9; StaticCode.show ...
- 服务器启动时Webapp的web.xml中配置的加载顺序
一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Ser ...
- Java类中方法的加载顺序
1 父类 public class Father {static {System.out.println("父类静态初始化块1");}public static int fsm = ...
- 使用 加载 顺序_SpringBoot系列教程之Bean加载顺序之错误使用姿势辟谣
在网上查询 Bean 的加载顺序时,看到了大量的文章中使用@Order注解的方式来控制 bean 的加载顺序,不知道写这些的博文的同学自己有没有实际的验证过,本文希望通过指出这些错误的使用姿势,让观文 ...
- springboot配置文件加载顺序_「SpringBoot系列」配置文件加载优先级解析
SpringBoot提供了外部分配置功能,可以使用属性文件(properties).YAML(yml)文件.环境变量和命令行参数来进行处部参数配置,并t以特定的顺序来处理配置,以便于允许合理的覆盖值. ...
- [Log4j] Log4j 的配置和配置文件加载顺序
需求: 把log4j.properties 配置问题放置到工程外面的指定文件夹. 具体原因参考http://blog.csdn.net/lihe2008125/article/details/77 ...
- 关于html和javascript在浏览器中的加载顺序问题的讨论
转自:http://www.cnblogs.com/beyondstorm/archive/2008/09/17/1292940.html 前一阵子横扫了javascript,当时自我感觉良好.现在一 ...
- 关于html和javascript在浏览器中的加载顺序问题的讨论（zz）
前一阵子横扫了javascript,当时自我感觉良好.现在一想,又觉得没什么.今天的任务是把asp.net ajax中客户端页面生命周期那一章研究完.然而,因为这一章的内容使我产生了一些迷惑.这些疑惑 ...
最新文章
- “未卜先知”、“自学成才”：GANs奇思妙想TOP10
- 联想笔记本降万元抢学生市场,兄弟们快抢啊
- django安装mysql驱动
- 大牛用emacs还是vim_Emacs，Vim还是其他？
- 每天一道算法题(27)——找出元音字母并排序
- 敏捷开发一千零一问系列之十二：敏捷实施的步骤？
- it男java_java-学习8
- python下pymysql的问题
- 网络调试助手（NetAssist）java socket通讯代码
- 小王子星球调色Web版 - the little prince
- 计算机知识复制粘贴,教你如何使用电脑复制粘贴快捷键
- 电脑CPU的最佳工作温度是多少度
- 关于PHP程序员技术职业生涯规划--swool大神韩天峰
- 前端程序员未来如何发展?
- 计算机休眠后无法唤醒出现蓝屏,电脑休眠后无法唤醒怎么办【解决方法】
- shell-awk命令详解
- 英语基础太差，能学好编程吗？
- arcgis弧段怎么加很多点_arcgis弧段怎么加很多点_莲子心营养价值高但是太苦喝不下去怎么办？别急，加这个就好很多。......
- 我们该如何进行bug总结？
- Schrodinger软件学习计算机辅助药物设计——基本操作以及分子对接