快捷導(dǎo)航

使用jquery動(dòng)態(tài)加載javascript以減少服務(wù)器壓力

更新時(shí)間：2012年10月29日 22:56:45 作者：

如果您要?jiǎng)?chuàng)建一個(gè)web2.0的應(yīng)用程序，那么你的網(wǎng)頁會(huì)包括大量的JavaScript文件，這些可能會(huì)拖慢您的網(wǎng)頁。因此，動(dòng)態(tài)加載JavaScript代碼到您的網(wǎng)頁是一個(gè)好主意，即只有當(dāng)實(shí)用他們的時(shí)候加載它們。這種策略可以幫助你減少你的網(wǎng)頁的加載時(shí)間

幸運(yùn)的是，jQuery提供了一個(gè)內(nèi)置的實(shí)用函數(shù)，$getScript（）為我們提供了這樣的方法。來實(shí)現(xiàn)在網(wǎng)頁動(dòng)態(tài)的功能。來看看這個(gè)函數(shù)的語法：

$.getScript(url,callback)

獲取url參數(shù)所指定的腳本，使用一個(gè)GET請(qǐng)求到指定的服務(wù)器

Parameters
URL（）獲取腳本文件的URL。

callback (Function)可選函數(shù) 調(diào)用腳本文件加載后里面的函數(shù)

具體實(shí)現(xiàn)過程是

從資源加載文本

|如果字符串成功

返回XHR實(shí)例，用來獲取腳本。

如何使用呢看下面的方法

我們創(chuàng)建一個(gè)new.js 腳本文件

復(fù)制代碼代碼如下:

 
var testVar = 'New JS loaded!'; 
alert(testVar); 
function newFun(dynParam) 
{ 
alert('You just passed '+dynParam+ ' as parameter.'); 
} 

HTML代碼

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title> $.getScript Example</title> 
<script type="text/javascript" src="../jquery.js"></script> 
<script type="text/javascript"> 
$(function() 
{ 
$('#loadButton').click(function(){ 
$.getScript('new.js',function(){ 
newFun('"Checking new script"');//這個(gè)函數(shù)是在new.js里面的，當(dāng)點(diǎn)擊click后運(yùn)行這個(gè)函數(shù) 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<button type="button" id="loadButton">Load</button> 
</body> 
</html> 

上述代碼當(dāng)中我們創(chuàng)建一個(gè)new.js的腳本文件，在body部分當(dāng)button函數(shù)觸發(fā)的時(shí)候調(diào)用它，這樣做的好處是減少服務(wù)器壓力，是非常值得推薦的

您可能感興趣的文章:

相關(guān)文章

利用div+jquery自定義滾動(dòng)條樣式的2種方法
可以設(shè)置左邊菜單項(xiàng)div的overflow-x:auto;overlfow-y:auto;這樣就會(huì)自動(dòng)生成了滾動(dòng)條，但是大家都知道自帶的不好看。接下來就是重點(diǎn)了，如何修改滾動(dòng)條的樣式呢？感興趣的朋友可以了解下本文
2013-07-07
jquery的ajax異步請(qǐng)求接收返回json數(shù)據(jù)實(shí)例
jquery的ajax異步請(qǐng)求接收返回json數(shù)據(jù)方法設(shè)置簡(jiǎn)單，一個(gè)是服務(wù)器處理程序是返回json數(shù)據(jù)，另一種就是ajax發(fā)送設(shè)置的datatype設(shè)置為jsonp格式數(shù)據(jù)或json格式都可以。這篇文章對(duì)此進(jìn)行了實(shí)例介紹,需要的朋友可以參考下
2014-06-06
jQuery EasyUI 右鍵菜單--關(guān)閉標(biāo)簽/選項(xiàng)卡的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨Query EasyUI 右鍵菜單--關(guān)閉標(biāo)簽/選項(xiàng)卡的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
jQuery下拉美化搜索表單效果代碼分享
這篇文章主要介紹了jQuery下拉美化搜索表單樣式，功能實(shí)現(xiàn)非常簡(jiǎn)單，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
使用jQuery調(diào)用XML實(shí)現(xiàn)無刷新即時(shí)聊天
這篇文章主要介紹了使用jQuery調(diào)用XML實(shí)現(xiàn)無刷新即時(shí)聊天的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
又一枚精彩的彈幕效果jQuery實(shí)現(xiàn)
精彩的彈幕效果分享給大家，具有一定的參考價(jià)值，感興趣的朋友可以嘗試制作彈幕，具體內(nèi)容如下
2016-07-07
greybox——不開新窗口看新的網(wǎng)頁
這篇文章主要介紹了greybox——不開新窗口看新的網(wǎng)頁
2007-02-02
基于jquery實(shí)現(xiàn)的tab選項(xiàng)卡功能示例【附源碼下載】
這篇文章主要介紹了基于jquery實(shí)現(xiàn)的tab選項(xiàng)卡功能,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,并附帶源碼下載,需要的朋友可以參考下
2019-06-06
jquery通過visible來判斷標(biāo)簽是否顯示或隱藏
這篇文章主要介紹了jquery如何判斷標(biāo)簽是否顯示或隱藏，使用到了visible屬性，大家可以學(xué)習(xí)下
2014-05-05
jquery 插件開發(fā)方法小結(jié)
jquery 插件開發(fā)方法，需要的朋友可以參考下。
2009-10-10