合并外部JavaScript 与判断页面的加载

合并JavaScript是通过把多个不同的JavaScript文件用一个来代替，从而减少HTTP请求数，以及减少下载其他资源的延迟时间。

JS的合并

以本网站为例，首页有三段js调用，分别是jquery.js、lazyload.js和两段直接摆出来的js代码(调用图片延迟加载的)：

$(function() { $(.entry img).lazyload({ placeholder:/d/file/9/1817.gif, effect:fadeIn }); }) ;

由于这样摆着非常累赘，所以我把把上面的js代码和lazyoad.js合并一起，方法即是复制上面的js代码到lazyload.js 文件最后，结尾分号前加(jQuery)修改后如下：

$(function() { $(.entry img).lazyload({ placeholder:/d/file/9/1817.gif, effect:fadeIn }); })

(jQuery) ;

这样就可以了。防止一些出错的话，可以使用批处理进行合并，完全方便又放心

把 lazyload.js 改名为 G.js，上面一段 js 新建一个名为 T.js，然后创建一个批处理文件，如下：

copyG.js+T.jsGT_bin.js/b

执行后生成 GT_bin.js 文件即所得合并 js.

把所有的js文件合并为一个js文件，然后在页面内调用函数：方法一：

原始html代码如下：

html

head

title奇芳阁分享最实用的绿色便携软件和互联网的精彩/title

script src=js1.js/script script src=js2.js/script

/head

body 奇芳阁：值得收藏的博客

/body /html

js1.js代码为：

function logText(message) { document.body.appendChild(document.createTextNode(message)); document.body.appendChild(document.createElement(br)); }

js2.js代码为：

window.onload = function() { logText(Application started.); logText(Library operation confirmed.); }

合并后

html

head

title奇芳阁分享最实用的绿色便携软件和互联网的精彩/title

script src=js1-js2.js/script scripteval(mod1);/script !-- 这里使用了eval()函数 //--

scripteval(mod2);/script !-- 这里使用了eval()函数 //--

/head

body 奇芳阁：值得收藏的博客

/body /html

合并文件js1-js2.js的代码为：

var mod1 = function logText(message){document.body.appendChild(document.createTextNode(message));

document.body.appendChild(document.createElement(/br/));};

var mod2 = window.onload=function(){logText(/Application started./);logText(/Library operation confirmed./);};

合并原理很简单，就是把前面几个js的代码分别赋给一个变量，然后在网页里用eval()这个函数执行。

重要：合并后js文件不宜太大，一般来说，合并后的js文件不要大于92160(90KB)。

方法二：

原始html代码如下：

DIV class=leftad_1

SCRIPT type=text/javascript src=/ad/leftad_1.js/SCRIPT ---位置1

/DIV

P !-- 内容 -- br / 奇芳阁分享实用绿色便携软件以及互联网的精彩内容br / br /

div class=leftad_2 SCRIPT type=text/javascript src=/ad/leftad_2.js/SCRIPT

/div---位置2

上面是两个不同的JS件

这样的话 如把这两个JS 合成一个JS

合成后又如何在不同地方(位置1位置2)显示这两个JS呢?

方法是把这2个js文件中代码放在一个js文件中，然后在页面引用js相应的地方调用相应的方法!

DIV class=leftad_1

SCRIPT type=text/javascriptfunctionName1();/SCRIPT ---位置1 /DIV

P !-- 内容 -- br /

奇芳阁分享实用绿色便携软件以及互联网的精彩内容br / br /

div class=leftad_2

SCRIPT type=text/javascriptfunctionName2();/SCRIPT /div ---位置2

js中文件代码：

function functionName1(){

//这里面放leftad_1.js的代码

}

function functionName2(){

//这里面放leftad_2.js的代码

}

方法3：

上面的js合并方法手动比较繁琐，也可以使用在线工具进行js文件的合并，本人一直使用的是开源中国的在线工具：http://tool.oschina.net/jscompress?type=3