如何控制页面内容的加载顺序

栏目: 编程语言 发布于: 2014-05-10 18:13:25

目前网站之间相互调用的情况越来越多,比如需要调用某个第三方提供的一些接口(天气预报),或者是第三方提供的广告......

但是出于各种原因(网络故障、服务器故障、软件故障......)常常会发生第三方的相应页面不能访问的情况,而直接导致自己网站不能正常访问,或者访问速度比较慢。

比如:某个网站为头、内容、底 结构,在网站的头部放置了第三方提供的广告,但是出于某种原因,第三方的服务不能正常访问了,直接导致的情况就是,整个网站 头部广告 以下的部分均不能正常访问(或者要过很久以后才能打开,昨天的台湾大地震,导致了 Google Adsense 不能正常访问,直接导致了我的个人网站 http:www.phpernote.com 不能正常打开。)。

为了解决如上的问题,查阅了很多文章后,找到如下的解决方案:页面的延时加载(Page Delay Load)。

在IE中,几乎每个对象(div iframe td ...)均有一个属性 readyState(http://msdn2.microsoft.com/en-us/library/ms534358.aspx) ,此属性反应对象在当前页面的载入状态,当该对象完全载入以后,则当前对象的 readyState=="complete" ,借助该属性,可以控制待当前页面最期待的内容载入完成以后,再载入有可能出错的页面(或者是优先级不高的页面)。

详细代码如下:

问题页面代码:

<html> 
<head> 
<title>php程序员的笔记 www.phpernote.com</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://www.phpernote.com/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>

修复页面代码:  

<html> 
<head> 
<title>php程序员的笔记 www.phpernote.com</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>

您可能感兴趣的文章

  • Js地址栏特效(显示页面内所有加链接的图片的大小和查看当前的浏览器的高度)
  • jquery判断页面是否已经加载了jquery文件
  • 如何优化网站页面提高网页的加载速度
  • 页面应该如何加载javascript才能提高网站性能
  • 禁止网页右键、复制、另存为、查看源文件等功能实现网页源代码保护
  • 由于其配置信息(注册表中的)不完整或已损坏,Windows 无法启动这个硬件设备。 (代码 19)解决办法
  • jQuery向动态生成的内容添加事件响应(jquery live方法简介)
  • PHP获取当前页面完整url地址函数,包括参数
本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。
转载请注明:文章转载自 [http://www.php230.com]
本文标题:如何控制页面内容的加载顺序
IT技术书籍推荐:
疯狂Java讲义(第3版)
疯狂Java讲义(第3版)
李刚 (作者)
《疯狂Java讲义(第3版)》内容简介:《疯狂Java讲义(第3版)》是《疯狂Java讲义》的第3版,第3版保持了前两版系统、全面、讲解浅显、细致的特性,全面新增介绍了Java 8的新特性,《疯狂Java讲义(第3版)》大部分示例程序都采用Lambda表达式、流式API进行了改写,因此务必使用Java 8的JDK来编译、运行。 《疯狂Java讲义(第3版)》深入介绍了Java编程的相关方面,全书内容覆盖了Java的基本语法结构、Java的面向对象特征、Java集合框架体系、Java泛型、异常处理、Java GUI编程、JDBC数据库编程、Java注释、Java的IO流体系、Java多线程编程、Java网络通信编程和Java反射机制。覆盖了java.lang、java.util、java.text、java.io和java.nio、java.sql、java.awt、javax.swing包下绝大部分类和接口。《疯狂Java讲义(第3版)》全面介绍了Java 8的新的接口语法、Lambda表达式、方法引用、构造器引用、函数式编程、流式编程、新的日期、时间API、并行支持、改进的类型推断、重复注解、JDBC 4.2新特性等新特性。
最新互联网资讯