点击onclick事件触发调用其他JS文件

Question

我希望实现的效果是点击onclick事件触发调用其他JS文件，也就是说如果不点击这个事件，被调用的JS文件不会再本页执行。我已经用了两种方法都失败，第一种是用innerHTML来输出，innerHTML写入<script src='a.js'></script>代码无法执行。然后我改成用div隐藏的块来实现，虽然点击之后JS文件内容显示出来了，但是其实在你点击之前浏览器已经执行过那个JS了，只不过没有显示出来罢了。这也不是我想要的效果。
大家帮我看看有什么办法没有？因为我的那个JS文件中调用了很多图片，如果打开页面就执行的话那我就会浪费很多流量。所以我希望实现用户点击某个按钮之后才会调用我的这个JS文件。

Answer 1

大概思路如下，代码没测试，你可以试一下。
<script id="s1" type="text/javascript" language="javascript" src=""></script>
<script>
function loadS1()
{
 document.getElementById("s1").src = "a.js"
}
</script>
<input type="button" value="click me" onclick="loadS1()">另外，你可以将整个a.js的代码写成为一个函数，点击之后调用就行了，没这么麻烦。

Answer 2

//动态加载JS
//@param scriptSrc JS文件地址
//@param scriptID 创建<script>标签时的ID
//@param parent 创建的<script>要插入的父元素
//@param callBack JS文件加载完成后要执行的回调
var loadScript = function(scriptSrc, scriptID, parent, callBack){
this.scriptSrc = scriptSrc;
this.scriptID = scriptID;
this.parent = parent;
this.callBack = (typeof(callBack) == 'undefined')? function(){} : callBack;
this.createScript();
}
loadScript.prototype = {
createScript: function()
{
var _self = this;
var _scriptOld = document.getElementById(this.scriptID);
if(_scriptOld){
_scriptOld.parentNode.removeChild(_scriptOld);
}
var _script = document.createElement('script');
_script.type = 'text/javascript';
_script.id = this.scriptID;
_script.src = this.scriptSrc;
if(document.all){
_script.onreadystatechange = function(){
if(/(complete|loaded)/.test(this.readyState)){
_self.callBack(_self.scriptID);
}
}
}
else{
_script.onload = function(){
_self.callBack(_self.scriptID);
}
}
this.parent.appendChild(_script);
}
}