[jQuery代码]如何动态加载jQuery类库即如何在需要的时候再加载jQuery类库？

日期：2011/12/18 来源：GBin1.com

jQuery类库说实话并不是很臃肿，压缩版本的jQuery类库可以帮助你有效地减少页面大小。不过并不是所有页面你都需要用到jQuery类库，或者你希望能够更好的优化你的页面使之加载的更快。不管怎样，我们希望能够自己来管理类库的加载。

在线演示

如何实现jQuery类库的动态加载呢？

第一步：调用一段代码来调用jQuery

第二步：持续调用直到jQuery类库能够加载

第三步：运行需要基于jQuery类库的代码

以下是具体代码。

代码1 （第一步）

<body>
     <h3 id='status'>jQuery is not loaded yet.</h3>
     <input type='button' value='Loading jQuery now...' onclick='load()' />
</body>

代码2 （第二步）

load = function() {
   load.getScript("js/jquery-1.7.1.min.js");
   load.tryReady(0); //用来等待jQuery类库加载
 }
	 
 //以下代码用来动态加载任何js代码
load.getScript = function(filename) {
   var script = document.createElement('script')
   script.setAttribute("type","text/javascript")
   script.setAttribute("src", filename)
   if (typeof script!="undefined")
   document.getElementsByTagName("head")[0].appendChild(script)
}

代码3 （第三步）

load.tryReady = function(time_elapsed) {
   //持续查询jQuery是否加载完毕
   if (typeof $ == "undefined") { // 如果没有加载jQuery...
	 if (time_elapsed <= 5000) {
	   setTimeout("load.tryReady(" + (time_elapsed + 200) + ")", 200); //设置200ms后继续尝试
	 } else {
	   alert("Failed to loading jQuery because of timeout.")
	 }
   } else {
	 // jQuery加载完毕后执行的代码
	 $("#status").animate({'font-size':'30px'}).text("Great! jQuery is loaded for GBin1.com!");
   }
 }

来源：如何动态加载jQuery类库即如何在需要的时候再加载jQuery类库？