您当前所在的位置:首页>>设计教程>>网页设计>>正文 文章正文
让广告代码不再影响网页加载速度
作者:  点击数:

一、现像:
  当您在您的网站、论坛BLOG某个地方插入一些联盟的广告条或者一些带有统计功能的计数器后,会发现自己的网页有时打开会出现长时间的停顿,甚至卡住不动了。但如果把广告代码插入网页的最底部却不存在这个问题。这是怎么回事呢?
  二、原因:
  为什么会出现这种现像呢?我们先从我们网页的结构说起。我们制作网页时主要是通过PhotoShop来切片生成HTML页,就算是不用PhotoShop切片,我们也会在制作网页时大量地用表格来为网页中的各个元素定位。PhotoShop切片切出的HTML页,其实就是一个大大的表格,大表格中又有很多小的单元格或,这些单元格放着被切好的小图片,一些单元格我们还要向里面放文字,超链接等元素。
  问题就出在表格上,大家都知道在HTML中与中夹着表格的内容。IE浏览器从服务器上下载HTML代码时是顺序进行的。只有读到时,才证明完整的一个表格被下载完毕,这个表格的内容才会显示出来,如果受到一些原因的影响迟迟不能被读到,就会引起表格里的内容迟迟不能显示出来,如果你的网页内容是个大表格的话,那么你的网页也同样会迟迟地出不来。
  广告代码其实都是从其它网站引来的一些内容。不管这些内容是什么,它的来源不是您的网站。当然也不能保证这段引来内容的下载速度。当你在你的网页的与之间插入了广告代码后,由于广告代码引来的内容下载速度慢,导致顺序进行的HTML下载被卡在广告代码处,导致迟迟读不到。所以就算是你的网页下载速度再快也耐这些“外来户”无何。所以您的网页速度就被拖慢了。
  三、解决
  知道了问题的原因,解决起来自然有数了。我们可以利用一些变通的方法来解决这个问题。
  如果您要在网页上加广告的话,您可以尝试以下操作

 程序代码
第一步:把这段代码放在你要放广告的网页位置:

以下是代码片段:<SPAN id=ad_01>广告载入中...</SPAN>

第二步:把这段代码放到页底:

<SPAN class=spanclass id=span_ad_01>
这里放广告的JS代码或其他加载速度比较慢的内容都可以.
</SPAN>
<SCRIPT>ad_01.innerHTML=span_ad_01.innerHTML;span_ad_01.innerHTML="";</SCRIPT>



 

 程序代码
在同一页面有多个广告需要调用时,您只要修改代码中的红色部分,令每个广告的ID不同即可。
以下是引用片段:
…………
<SPAN id=ad_01>广告载入中...</SPAN>
…………
<SPAN id=ad_02>广告载入中...</SPAN>
…………

<SPAN class=spanclass id=span_ad_01>
/***** 广告内容一 *****/
</SPAN>
<SCRIPT>ad_01.innerHTML=span_ad_01.innerHTML;span_ad_01.innerHTML="";</SCRIPT>
<SPAN class=spanclass id=span_ad_02>
/***** 广告内容二 *****/
</SPAN>
<SCRIPT>ad_02.innerHTML=span_ad_02.innerHTML;span_ad_02.innerHTML="";</SCRIPT>



四、原理
  知其然,也要知其所以然,为什么上述代码会加快速度呢?
  其实很简单,我们利用一个<span>标签取代了<table>与</table>中的广告代码。由于这个<span>标签只是十来个字节的普通HTML本地代码,不会影响网页下载的速度。等整个表格下载完后,网站的内容已经显示出来了。再利用另一个<span>标签包住广告代码,等广告内容下载完成后,再利用JavaScript把下面包有广告内容的<span>标签中的内容,传递给上面那个取代原广告条位置<span>里面。再把下面的<span>内容清空。这样一来,“先显示网站内容再显示广告内容”就不会让网页速度减慢了。

  五、局限性
  由于一些技术原因,导至上述代码并不是在所有地方都能使用的。就我在制作“

本新闻共2页,当前在第1页  1  2  

相 关 搜 索
今 日 头 条
 
最 新 热 门
最 新 推 荐
 
文章来源: 不详  更新时间:2007-6-2 11:17:19  责任编辑:
  上一篇文章:CSS垂直树形下拉菜单
下一篇文章:屏蔽鼠标右键、取消选取、防止复制、网页将不能被另存为
相关文章