让广告代码不再影响网页加载速度

您现在的位置：圆点视线 >> 教程 >> 网页设计 >> 网页广告代码 >> 文章正文

[图文]让广告代码不再影响网页加载速度

热 ★★★

让广告代码不再影响网页加载速度

作者：佚名　文章来源：圆点视线　点击数：　更新时间：2007-5-15 8:34:07　

　页面功能：【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

【字体：小大】

一、现像：
　　当您在您的网站、论坛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>内容清空。这样一来，“先显示网站内容再显示广告内容”就不会让网页速度减慢了。

　　五、局限性
　　由于一些技术原因，导至上述代码并不是在所有地方都能使用的。就我在制作“玉玺空间”时，就碰到一此。结果发现如果上面的<span id="span_myads"></span>被段落标记<p></p>包住时，这个代码在IE中就无法正常使用。提示“脚本错误：未知错误”。所以大家在做网页时不要利用段落符为广告条定位。
　　如果大家也碰到上述代码无法使用时，不妨自己解决一下，同样也欢迎给我留言共同解决。

　　六、后记
　　上述代码在IE、FireFoX浏览器下均可正常运行。

　【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】　文章录入：apoints 责任编辑：apoints 　【字体：小大】

上一篇文章：对联广告代码效果大全

下一篇文章：常用JS网页广告代码