欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

AD最后加载与ready之后加载 JSADready加载 

程序员文章站 2022-06-09 13:48:19
...

为了防止广告代码调用的外部文件或外部JavaScript文件因为大小、速度等问题拖累整个网页的加载速度，通常我们将广告代码放到页面最后加载，具体加载位置又可分为 文件末尾 和 等待主页面ready(onload)后加载，通常被我们称作后加载或后载入。以下分别介绍之(以本站使用的天气预报代码作为例子):

1、文件末尾加载

思路：在主页面广告位置预留广告显示位置，加载主页面时暂时不加载广告内容，以防广告内容影响到主页面的加载速度和展现。在最后才加载广告内容，加载完成后再显示到预留位置。

代码

01 在主页面对应位置预留广告位,设置其id为test01，例如
02 <span id="test01" class="testc">&nbsp;</span>
03 然后在文件末尾添加span，其中调用真实的代码，但隐藏不显示
04 <span id="test01_1" style="display:none">
05   <iframe src="http://m.weather.com.cn/m/pn5/weather.htm " width="200"height="20" marginwidth="0" marginheight="0" hspace="0" vspace="0"frameborder="0" scrolling="no"></iframe>
06 </span>
07 然后用以下代码将隐藏的内容替换到主页面预留位置：
08 <script type="text/javascript">
09    function rpad(adName,spanName){
10     document.getElementById(adName).innerHTML = document.getElementById( spanName ).innerHTML;
11     document.getElementById(spanName).innerHTML="";
12   }
13   rpad('test01', 'test01_1');
14 </script>

2、等待主页面ready(onload)之后加载

ready是指的JQuery中的$(document).ready(), onload是指的DOM原生的onload()。两者均是在主页面加载完城后进行，但在不同的浏览器，其执行顺序有差异，在Firefox火狐浏览器中，$(document).ready先于onload执行，而在IE中，顺序刚好相反。

将以下代码保存为html文件，分别在Firefox火狐和IE下运行，即可清晰的看到$(document).ready和onload 2者执行顺序的差异。

01 <html>
02 <head>
03 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
04 <title>$(document).ready和onload测试</title>
05 <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
06 <script type="text/javascript">
07 function load(){
08    $("p").append("<br/>onload开始执行中了");
09    $("p").append("<br/>My onload");
10    $("p").append("<br/>");
11 }
12 $(document).ready(function () {
13     $("p").append("<br/>$(document).ready方法开始执行了");
14     $("p").append("<br/>My $(document).ready");
15     $("p").append("<br/>");
16 });
17 </script>
18 </head>
19 <body onload="load()">
20 <h2>$(document).ready和onload测试</h2>
21 <p>++++++++++++++++++++</p>
22 <br />
23 </body>
24 </html>

好，言归正传，看看等待主页面ready之后加载的代码如何实现：

01 <html>
02 <head>
03 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
04 <title>$(document).ready测试</title>
05 </head>
06 <body>
07 <h2>$(document).ready测试</h2>
08 <p>++++++++++++++++++++</p>
09 <div id="test02" class="textc2">&nbsp;</div>
10 <br />
11 <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
12 <script type="text/javascript">
13 $(document).ready(function () {
14     $("#test02").append('<iframe src="http://m.weather.com.cn/m/pn5/weather.htm" width="200" height="20" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>');
15 });
16 </script>
17 </body>
18 </html>

主页面onload加载

01 <html>
02 <head>
03 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
04 <title>onload测试</title>
05 </head>
06 <body onload="load()">
07 <h2>onload测试</h2>
08 <p>++++++++++++++++++++</p>
09 <div id="test03" class="testc3"></div>
10 <br />
11 </body>
12 </html>
13 <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
14 <script type="text/javascript">
15 function load(){
16    $("#test03").append('<iframe src="http://m.weather.com.cn/m/pn5/weather.htm" width="200" height="20" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>');
17 }
18 </script>

3、定时加载

1 <script language="JavaScript" src="" id="myad"></script>
2 <script>
3      setTimeout("document.getElementById('myad').src='ad.js'; ",6000);//延时6秒
4 </script>

相关标签： JS AD ready 加载

上一篇： hibernate处理批量新增更新和删除

下一篇： C#命令行编译器配置方法

推荐阅读