AD最后加载与ready之后加载
AD最后加载与ready之后加载为了防止广告代码调用的外部文件或外部JavaScript文件因为大小、速度等问题拖累整个网页的加载速度，通常我们将广告代码放到页面最后加载，具体加载位置又可分为 文件末尾 和 等待主页面ready(onload)后加载，通常被我们称作后加载或后载入。以下分别介绍之(以本站使用的天气预报代码作为例子):
1、文件末尾加载
思路：在主页面广告位置预留广告显示位置，加载主页面时暂时不加载广告内容，以防广告内容影响到主页面的加载速度和展现。在最后才加载广告内容，加载完成后再显示到预留位置。
代码01 在主页面对应位置预留广告位,设置其id为test01，例如
02 <span id="test01" class="testc"> </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"> </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> 谢谢分享
页:
[1]