很久以前就做过类似的东西,昨天因为个人网站的需要,把相应代码湾镇写了一下,现公布如下( 因刚开始做站长,刚才在中国站长站论坛中放置了一下,居然没人顶,顿时心灰意冷,所以,还是回CSDN看看效果如何 :) )
原文如下:
目前网站之间相互调用的情况越来越多,比如 需要调用某个第三方提供的一些接口(天气预报),或者是第三方提供的广告......
但是出于各种原因(网络故障、服务器故障、软件故障......)常常会发生第三方的相应页面不能访问的情况,而直接导致自己网站不能正常访问,或者访问速度比较慢。
比如:某个网站为 头、内容、底 结构,在网站的头部放置了第三方提供的广告,但是出于某种原因,第三方的服务不能正常访问了,直接导致的情况就是,整个网站 头部广告 以下的部分均不能正常访问(或者要过很久以后才能打开,昨天的台湾大地震,导致了 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>精巧软件 <A href="http://www.oldtool.netwww.oldtool.net</title>
</head>
<body>
<div>这里是页面的最顶端内容。</div>
<div>如下的 div1 div2 div3 div4 可以放置任何第三方的内容,比如广告。</div>
<div style="width:200px;height:40px;border:1px solid red;">inner html 1</div>>
<div>说明:此处的 宽、高,不一定需要提前设置,可以将此 Container 的宽、高根据内部的内容自适应。</div>
<div style="width:200px;height:40px;border:1px solid red;">inner html 2</div>
<div>说明:div3中的内容不能正常访问,直接导致其下最重要的内容不能正常打开,或者要过很久以后才可以正常打开。</div>
<div 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 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>精巧软件 <A href="http://www.oldtool.netwww.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 style="width:200px;height:40px;border:1px solid red;">loading...</div>
<div style="width:200px;height:40px;border:1px solid red;">loading...</div>
<div style="width:200px;height:40px;border:1px solid red;">loading...</div>
<div style="width:200px;height:40px;border:1px solid red;">loading...</div>
<div>这里是页面最重要的内容,您每次打开该页面,均希望该部分内容无论如何可以正常显示。</div>
<div>这里是页面的最底端</div>
</body>
</html>
分享到:
相关推荐
本篇文章主要介绍了Vue的加载顺序探讨,详细的介绍了加载顺序以及如何判断所有的子组件加载完成。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Vue实践分享(三)在实际项目的开发过程中,经常会遇到页面还没渲染完成而...以上这篇基于Vue渲染与插件的加载顺序的问题详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
本文实例讲述了Django框架模板文件使用及模板文件加载顺序。分享给大家供大家参考,具体如下: 模板功能 产生html,控制页面上产生的内容。模板文件不仅仅是一个html文件。 模板文件包含两部分内容: 1.静态文件:...
MIP(移动网页加速器)通过优化网页JS、控制资源加载顺序,达到加速网页的效果
3、由于是页面是从上到下依次加载文件的,并且边加载边解释,所以可以添加javascript控制器控制页面文件的加载顺序,如先加载css布局文件,再显示有图片的css美化文件,之后再加载大的falsh文件,或者安内容的重要...
3、由于是页面是从上到下依次加载文件的,并且边加载边解释,所以可以添加javascript控制器控制页面文件的加载顺序,如先加载css布局文件,再显示有图片的css美化文件,之后再加载大的falsh文件,或者安内容的重要性...
41如何把内容关联后按顺序打印见样例四十一 42如何把整页内容缩放打印见样例四十二 43如何分页打印综合表格见样例四十三 44如何缩放打印单个超文本内容见样例四十四 45如何获得打印状态及最终结果见样例四十五 46...
在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行。 所以,在这里,我们可以对其进行很多优化工作。 放置在BODY底部 ...
为了提高页面加载速度,开发人员已经找到了在整个页面加载过程中根据代码的即时或延迟需求(依赖项、表单处理、非立即需要的代码等)拆分负载的方法。 这不是我们唯一可以做的事情,我们实际上可以在客户端和服务器...
8.6 页面滚动时加载新的网页内容 8.7 打造自己的站内搜索引擎 8.8 异步加载并解析XML文件 8.9 动态加载HTML内容到标签页中 8.10 使用AJAX刷新异步提交表单 8.11 使用AJAX刷新上传图片 8.12 使用AJAX刷新验证PHP会话...
4.3 配置的加载顺序 11 4.4 提示 11 4.5 一般需要修改的配置项 11 4.5.1 默认语言 11 4.5.2 自定义ToolbarSet, 去掉一些不需要的功能 12 4.5.3 加上几种常用的字体 13 4.5.4 修改“回车” 和 “Shift + 回车”的...
1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用登录按钮 2.3 动态创建按钮 2.3 平面...
1、设置某个页面为启动后打开的第一个页面 2、微信小程序调试技巧 3、微信小程序的背景图...在app.json文件中,pages数组,设置在第一个的页面就是默认启动页面,所以你只需要调整你当前开发的页面顺序就好了。 (此图
1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用登录按钮 2.3 动态创建按钮 2.3 平面...
Kiosk Client设计用于信息亭设置,可以按预定义的顺序或随机顺序渲染多个图像或网页。 Kiosk Client可以从可公开访问的站点中提取其内容。 驱动Kiosk Client的说明也可以从任何静态Web托管源托管。特征使用基于Web...
6.1.5 加载顺序 134 6.2 控制流 135 6.2.1 循环的陷阱 135 6.2.2 解决控制流难题 137 6.3 Node.js应用部署 138 6.3.1 日志功能 138 6.3.2 使用cluster模块 140 6.3.3 启动脚本 142 6.3.4 共享80...
41.如何把内容关联后按顺序打印见样例四十一 42.如何把整页内容缩放打印见样例四十二 43.如何分页打印综合表格见样例四十三 44.如何缩放打印单个超文本内容见样例四十四 45.如何获得打印状态及最终结果见样例四十五 ...
1.4 网页的文本内容 7 1.5 链接、图像和其他非文本内容 8 1.6 文件名和文件夹名 9 1.7 URL 10 1.8 HTML:有含义的标记 13 1.9 浏览器对网页的默认显示效果 16 1.10 要点回顾 17 第2章 处理...