JS控制页面内容的加载顺序

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

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

比如:某个网站为头、内容、底 结构,在网站的头部放置了第三方提供的广告,但是出于某种原因,第三方的服务不能正常访问了,直接导致的情况就是,整个网站 头部广告 以下的部分均不能正常访问(或者要过很久以后才能打开,昨天的台湾大地震,导致了 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" ,借助该属性,可以控制待当前页面最期待的内容载入完成以后,再载入有可能出错的页面(或者是优先级不高的页面)。

详细代码如下:

问题页面代码:

  1. <html>  
  2. <head>  
  3. <title> www.daimajiayuan.com</title>  
  4. </head>  
  5. <body>  
  6. <div>这里是页面的最顶端内容。</div>  
  7. <div>如下的 div1 div2 div3 div4 可以放置任何第三方的内容,比如广告。</div>  
  8. <div id="div1" style="width:200px;height:40px;border:1px solid red;">inner html 1</div>  
  9. <div>说明:此处的 宽、高,不一定需要提前设置,可以将此 Container 的宽、高根据内部的内容自适应。</div>  
  10. <div id="div2" style="width:200px;height:40px;border:1px solid red;">inner html 2</div>  
  11. <div>说明:div3中的内容不能正常访问,直接导致其下最重要的内容不能正常打开,或者要过很久以后才可以正常打开。</div>  
  12. <div id="div3" style="width:200px;height:40px;border:1px solid red;">  
  13. <!-- Google Adsense -->  
  14. <script type="text/javascript"><!--  
  15. google_ad_client = "pub-wrongcode";  
  16. google_ad_width = 468;  
  17. google_ad_height = 60;  
  18. google_ad_format = "468x60_as";  
  19. google_ad_type = "text_image";  
  20. google_ad_channel = "";  
  21. //--></script>  
  22. <script type="text/javascript" src="http://www.phpernote.com/wrongcode.js">  
  23. </script>  
  24. <!-- Google Adsense -->  
  25. </div>  
  26. <div id="div4" style="width:200px;height:40px;border:1px solid red;">inner html 4</div>  
  27. <div>这里是页面最重要的内容,您每次打开该页面,均希望该部分内容无论如何可以正常显示。</div>  
  28. <div>这里是页面的最底端</div>  
  29. </body>  
  30. </html> 

修复页面代码:  

  1. <html>  
  2. <head>  
  3. <title> www.daimajiayuan.com</title>  
  4. </head>  
  5. <body>  
  6. <script language="javascript" type="text/javascript">  
  7. // 按照 期望的次序 排列每个 div 的 Id.  
  8. var arr1=new Array("div3","div2","div4","div1");  
  9. //var arr1=new Array("if3","if2","if4","if1");  
  10. // 期望 次序 div 中的内容.  
  11. var arr2=new Array("换成你期望的内容。","inner html 2","inner html 4","inner html 1");  
  12. //var arr2=new Array("3.html","2.html","4.html","1.html");  
  13. // 期望 次序 中 iframe 的状态.  
  14. var arr3=new Array("false","false","false","false");  
  15. function showState()  
  16. {  
  17. // 判断 当前页面是否载入完毕  
  18. if(window.document.body.readyState=="complete")  
  19. {  
  20. for(i=0;i<arr1.length;i++)  
  21. {  
  22. if(arr3[i]=="false")  
  23. {  
  24. document.getElementById(arr1[i]).innerHTML=arr2[i];  
  25. arr3[i]="true";  
  26. return ;  
  27. }  
  28. }  
  29. }  
  30. }  
  31. // 每间隔 2 秒后调用如上方法, 当然,正常应用应该将此时间间隔设置小一些, 此处 仅 为了方便大家看效果  
  32. setInterval("showState()",2000);  
  33. </script>  
  34. <div>这里是页面的最顶端内容。</div>  
  35. <div>如下的 div1 div2 div3 div4 全部延时加载。 当前页面中的最重要内容不会因 div1 div2 div3 div4 内容的损坏,而不能正常访问。</div>  
  36. <div id="div1" style="width:200px;height:40px;border:1px solid red;">loading...</div>  
  37. <div id="div2" style="width:200px;height:40px;border:1px solid red;">loading...</div>  
  38. <div id="div3" style="width:200px;height:40px;border:1px solid red;">loading...</div>  
  39. <div id="div4" style="width:200px;height:40px;border:1px solid red;">loading...</div>  
  40. <div>这里是页面最重要的内容,您每次打开该页面,均希望该部分内容无论如何可以正常显示。</div>  
  41. <div>这里是页面的最底端</div>  
  42. </body>  
  43. </html> 

这里有一篇关于图片延迟加载的文章,可以参考一下,jQuery图片延迟加载插件

转载请注明:代码家园 » JS控制页面内容的加载顺序

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)