目前网站之间相互调用的情况越来越多,比如 需要调用某个第三方提供的一些接口(天气预报),或者是第三方提供的广告......
但是出于各种原因(网络故障、服务器故障、软件故障......)常常会发生第三方的相应页面不能访问的情况,而直接导致自己网站不能正常访问,或者访问速度比较慢。
为了解决如上的问题,查阅了很多文章后,找到如下的解决方案:页面的延时加载。
在IE中,几乎每个对象均有一个属性 readyState,此属性反应对象在当前页面的载入状态,当该对象完全载入以后,则当前对象的 readyState=="complete" ,借助该属性,可以控制待当前页面最期待的内容载入完成以后,再载入有可能出错的页面(或者是优先级不高的页面)。
详细代码如下:
问题页面代码:
这里是页面的最顶端内容。
如下的 div1 div2 div3 div4 可以放置任何第三方的内容,比如广告。
inner html 1
说明:此处的 宽、高,不一定需要提前设置,可以将此 Container 的宽、高根据内部的内容自适应。
inner html 2
说明:div3中的内容不能正常访问,直接导致其下最重要的内容不能正常打开,或者要过很久以后才可以正常打开。
inner html 4
这里是页面最重要的内容,您每次打开该页面,均希望该部分内容无论如何可以正常显示。
这里是页面的最底端
修复页面代码:
// 按照 期望的次序 排列每个 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
{
if(arr3[i]=="false")
{
document.getElementById(arr1[i]).innerHTML=arr2[i];
arr3[i]="true";
return ;
}
}
}
}
// 每间隔 2 秒后调用如上方法, 当然,正常应用应该将此时间间隔设置小一些, 此处 仅 为了方便大家看效果
setInterval("showState()",2000);
这里是页面的最顶端内容。
如下的 div1 div2 div3 div4 全部延时加载。 当前页面中的最重要内容不会因 div1 div2 div3 div4 内容的损坏,而不能正常访问。
loading...
loading...
loading...
loading...
这里是页面最重要的内容,您每次打开该页面,均希望该部分内容无论如何可以正常显示。
这里是页面的最底端
禁止转载 广州幻色互动为您提供专业网站建设服务