让javascript加载速度倍增的两种方法

分类:js小程序

js代码的调用和转入一直是个头疼的问题,如果载入速度太慢,实在是影响效果,特别是调用其他网站的JS(比如统计代码,其他网站提供的广告代码等等。)

  

  下面就介绍一个方法,让JS不会过多的影响网站的载入速度。

  要不想让统计或广告之类的外部代码或页面拖慢网站的速度,就只能让他们在本站页面的所有内容下载完成之后再下载外部代码,而在此之前应该在网页指定的位置显示载入中或是用图片标示该位置有内容正在下载。

  这样,要实现该功能的代码就分为三个部分:

  一、在页面中提示载入中的代码;

  二、页面所有内容之后,需要下载的外部代码;

  三、外部代码下载之后,把代码置换到页面中指定位置的代码。

  第一部分的代码为:

 

<span id=ad_01>LOADING…</span>

这部分很好懂,注意这里span的ID,在这里是ad_01。记下它,后面要用到。这部分的代码应该是在页面中你为广告或统计预留的位置。

  当然,那个LOADING…你可以换成自己喜欢的小图片.看起来很有AJAX效果呢.

  第二部分代码也很简单:

&nbsp;

<SPAN class=spanclass id=span_ad_01>

<script type="text/javascript"><!-- 

将你的广告代码完整粘贴到这里 

//--></script> 

</SPAN>

  与上面一样,也要记下这里span的ID,在这里是span_ad_01,这个ID不能跟上面的ID相同。为了不让这部分外部代码拖慢你的网页显示速度,这部分应该放在页面所有正文的内容之后。

  第三部分代码比较重要,也稍微难记一些,是用来把后来载入的代码替换到页面内容中:

&nbsp;

<SCRIPT>ad_01.innerHTML=span_ad_01.innerHTML;span_ad_01.innerHTML="";</SCRIPT>

  这段代码有两句,第一句中"="前是第一部分代码中指定的span的ID加.innerHTML,"="后是第二部分代码中指定的span id加.innerHTML。第二句是将第二部分的spanid内容清空。

  

  注意:这部分的代码要放在第二部分代码之后,最好紧跟在第二部分代码的后面。

  

  三部分代码添加之后,再看下你的网站,再也不会因为要调用外部代码拖慢网页的显示速度了。

另一种方法:

 解决办法:换一个js包含的方式,让javascript加载速度倍增。

把通常加载方式:
            <script src="xxxx.js"></script>

改变成:
<script type="text/javascript">
document.write("<scr"+"ipt src=\"xxx.js\"></sc"+"ript>")
</script>

-------------------------------------

举个例子:
比如下面是申请的站长统计代码,以前尽管是把它放在页面的最底部,但还是拖累页面加载进度。

<script src="http://s69.cnzz.com/stat.php?show=pic" language="JavaScript" charset="gb2312"></script>

我们可以把它换成这样的方式来加载(任然放在页面最底部):
<<script type="text/javascript">>
document.write("<<scr"+"ipt src=\"http://69.cnzz.com/stat.php?show=pic\" language=\"JavaScript\" charset=\"gb2312\"></sc"+"ript>>")
<</script>>

速度快多了。

其它的js如法炮制,广告的,页面特效的。。。
最后再废话几句:


<<script type="text/javascript">>
document.write("<<scr"+"ipt src=\"xxx.js\"></sc"+"ript>>")
<</script>>

的方式,还可实现按需按条件的来加载你要的JS文件:
<<script type="text/javascript">>
if ( 心情好 ) {document.write("<<scr"+"ipt src=\"xxx.js\"></sc"+"ript>>")}
<</script>>

这样要是“心情不好”,就自然不会载入你不想要的JS文件了。

本文链接: 让javascript加载速度倍增的两种方法
版权所有:布士收藏夹在网络收集,如有侵犯你的权利, 请联系QQ:641868752。

评论

发表评论

*

* (显示gravatar头像)

Ctrl+Enter快捷回复

© 2014 布士收藏夹 all rights reserved.