现在的位置: 首页 > 软件开发 > 正文

最后加载与ready之后加载

2010年08月31日 软件开发 ⁄ 共 2991字 暂无评论 ⁄ 被围观 3,017+

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

1、文件末尾加载

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

代码

在主页面对应位置预留广告位,设置其id为test01,例如 
<span id="test01" class="testc">&nbsp;</span>
然后在文件末尾添加span,其中调用真实的代码,但隐藏不显示
<span id="test01_1" style="display:none">
  <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>
</span>
然后用以下代码将隐藏的内容替换到主页面预留位置:
<script type="text/javascript">
   function rpad(adName,spanName){
    document.getElementById(adName).innerHTML = document.getElementById( spanName ).innerHTML;
    document.getElementById(spanName).innerHTML="";
  }
  rpad(\'test01\', \'test01_1\');
</script>

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

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

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>$(document).ready和onload测试</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
function load(){
   $("p").append("<br/>onload开始执行中了");
   $("p").append("<br/>My onload");
   $("p").append("<br/>");
}
$(document).ready(function () {
	$("p").append("<br/>$(document).ready方法开始执行了");
	$("p").append("<br/>My $(document).ready");
	$("p").append("<br/>");
});
</script>
</head>
<body onload="load()">
<h2>$(document).ready和onload测试</h2>
<p>++++++++++++++++++++</p>
<br />
</body>
</html>

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>$(document).ready测试</title>
</head>
<body>
<h2>$(document).ready测试</h2>
<p>++++++++++++++++++++</p>
<div id="test02" class="textc2">&nbsp;</div>
<br />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#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>\');
});
</script>
</body>
</html>

主页面onload加载

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>onload测试</title>
</head>
<body onload="load()">
<h2>onload测试</h2>
<p>++++++++++++++++++++</p>
<div id="test03" class="testc3"></div>
<br />
</body>
</html>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
function load(){
   $("#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>\');
}
</script>

3、定时加载

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

给我留言

您必须 [ 登录 ] 才能发表留言!

×
#