快捷導(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)頁(yè)會(huì)包括大量的JavaScript文件，這些可能會(huì)拖慢您的網(wǎng)頁(yè)。因此，動(dòng)態(tài)加載JavaScript代碼到您的網(wǎng)頁(yè)是一個(gè)好主意，即只有當(dāng)實(shí)用他們的時(shí)候加載它們。這種策略可以幫助你減少你的網(wǎng)頁(yè)的加載時(shí)間

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

$.getScript(url,callback)

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

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

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

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

從資源加載文本

|如果字符串成功

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

如何使用呢看下面的方法

我們創(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)文章

JQ圖片文件上傳之前預(yù)覽功能的簡(jiǎn)單實(shí)例(分享)
下面小編就為大家?guī)?lái)一篇JQ圖片文件上傳之前預(yù)覽功能的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
Jquery綁定事件(bind和live的區(qū)別介紹)
Jquery中綁定事件有三種方法click、bind、live第一種方法很好理解，其實(shí)就和普通JS的用法差不多，只是少了一個(gè)on而已第二、三種方法都是綁定事件
2013-08-08
淺談jQuery雙事件多重加載的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談jQuery雙事件多重加載的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
jQuery+css實(shí)現(xiàn)炫目的動(dòng)態(tài)塊漂移效果
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)的動(dòng)態(tài)塊漂移效果,涉及jQuery基于隨機(jī)數(shù)與時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下
2016-01-01
基于DOM節(jié)點(diǎn)刪除之empty和remove的區(qū)別(詳解)
下面小編就為大家?guī)?lái)一篇基于DOM節(jié)點(diǎn)刪除之empty和remove的區(qū)別(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
jQuery實(shí)現(xiàn)優(yōu)雅的彈窗效果（6）
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)優(yōu)雅彈窗效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
深入理解jQuery 事件處理
下面小編就為大家?guī)?lái)一篇深入理解jQuery 事件處理。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
jquery控制頁(yè)面的展開(kāi)和隱藏實(shí)現(xiàn)方法(推薦)
下面小編就為大家?guī)?lái)一篇jquery控制頁(yè)面的展開(kāi)和隱藏實(shí)現(xiàn)方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
表單驗(yàn)證插件Validation應(yīng)用的實(shí)例講解
這篇文章的內(nèi)容是表單驗(yàn)證插件Validation應(yīng)用的實(shí)例講解，需要的朋友可以參考下
2015-10-10
jQuery關(guān)鍵詞說(shuō)明插件cluetip使用指南
我們?cè)谧鰓eb項(xiàng)目的時(shí)候，經(jīng)常會(huì)使用到提示效果。html自帶的提示效果是label標(biāo)簽的title，但是這個(gè)效果過(guò)于簡(jiǎn)單和難看，并且不方便調(diào)整樣式。今天我偶然發(fā)現(xiàn)個(gè)jQuery的插件，可以很方便的做出漂亮的提示效果。
2015-04-04