使用jquery動態(tài)加載javascript以減少服務(wù)器壓力
更新時間：2012年10月29日 22:56:45 作者：
如果您要創(chuàng)建一個web2.0的應(yīng)用程序，那么你的網(wǎng)頁會包括大量的JavaScript文件，這些可能會拖慢您的網(wǎng)頁。因此，動態(tài)加載JavaScript代碼到您的網(wǎng)頁是一個好主意，即只有當(dāng)實用他們的時候加載它們。這種策略可以幫助你減少你的網(wǎng)頁的加載時間
幸運(yùn)的是，jQuery提供了一個內(nèi)置的實用函數(shù)，$getScript（）為我們提供了這樣的方法。來實現(xiàn)在網(wǎng)頁動態(tài)的功能。來看看這個函數(shù)的語法：
$.getScript(url,callback)
獲取url參數(shù)所指定的腳本，使用一個GET請求到指定的服務(wù)器
Parameters
URL（）獲取腳本文件的URL。
callback (Function)可選函數(shù) 調(diào)用腳本文件加載后里面的函數(shù)
具體實現(xiàn)過程是
從資源加載文本
|如果字符串成功
返回XHR實例，用來獲取腳本。
如何使用呢看下面的方法
我們創(chuàng)建一個new.js 腳本文件
var testVar = 'New JS loaded!';
alert(testVar);
function newFun(dynParam)
{
alert('You just passed '+dynParam+ ' as parameter.');
}
HTML代碼
<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"');//這個函數(shù)是在new.js里面的，當(dāng)點擊click后運(yùn)行這個函數(shù)
});
});
});
</script>
</head>
<body>
<button type="button" id="loadButton">Load</button>
</body>
</html>
上述代碼當(dāng)中我們創(chuàng)建一個new.js的腳本文件，在body部分當(dāng)button函數(shù)觸發(fā)的時候調(diào)用它，這樣做的好處是減少服務(wù)器壓力，是非常值得推薦的
$.getScript(url,callback)
獲取url參數(shù)所指定的腳本，使用一個GET請求到指定的服務(wù)器
Parameters
URL（）獲取腳本文件的URL。
callback (Function)可選函數(shù) 調(diào)用腳本文件加載后里面的函數(shù)
具體實現(xiàn)過程是
從資源加載文本
|如果字符串成功
返回XHR實例，用來獲取腳本。
如何使用呢看下面的方法
我們創(chuàng)建一個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"');//這個函數(shù)是在new.js里面的，當(dāng)點擊click后運(yùn)行這個函數(shù)
});
});
});
</script>
</head>
<body>
<button type="button" id="loadButton">Load</button>
</body>
</html>
上述代碼當(dāng)中我們創(chuàng)建一個new.js的腳本文件，在body部分當(dāng)button函數(shù)觸發(fā)的時候調(diào)用它，這樣做的好處是減少服務(wù)器壓力，是非常值得推薦的
您可能感興趣的文章:
- 使用jQuery動態(tài)加載js腳本文件的方法
- jquery及js實現(xiàn)動態(tài)加載js文件的方法
- jquery getScript動態(tài)加載JS方法改進(jìn)詳解
- 一個簡單的動態(tài)加載js和css的jquery代碼
- 三種動態(tài)加載js的jquery實例代碼另附去除js方法
- 如何使用jquery動態(tài)加載js,css文件實現(xiàn)代碼
- jquery動態(tài)加載js/css文件方法(自寫小函數(shù))
- 使用jquery動態(tài)加載Js文件和Css文件
- jquery動態(tài)加載js三種方法實例
- 使用jquery動態(tài)加載js文件的方法
- jQuery實現(xiàn)動態(tài)加載(按需加載)javascript文件的方法分析
相關(guān)文章
下面小編就為大家?guī)硪黄狫Q圖片文件上傳之前預(yù)覽功能的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Jquery綁定事件(bind和live的區(qū)別介紹)
Jquery中綁定事件有三種方法click、bind、live第一種方法很好理解，其實就和普通JS的用法差不多，只是少了一個on而已第二、三種方法都是綁定事件2013-08-08
下面小編就為大家?guī)硪黄獪\談jQuery雙事件多重加載的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
jQuery+css實現(xiàn)炫目的動態(tài)塊漂移效果
這篇文章主要介紹了jQuery+css實現(xiàn)的動態(tài)塊漂移效果,涉及jQuery基于隨機(jī)數(shù)與時間函數(shù)動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
基于DOM節(jié)點刪除之empty和remove的區(qū)別(詳解)
下面小編就為大家?guī)硪黄贒OM節(jié)點刪除之empty和remove的區(qū)別(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)優(yōu)雅彈窗效果 的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
下面小編就為大家?guī)硪黄钊肜斫鈐Query 事件處理。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
jquery控制頁面的展開和隱藏實現(xiàn)方法(推薦)
下面小編就為大家?guī)硪黄猨query控制頁面的展開和隱藏實現(xiàn)方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章的內(nèi)容是表單驗證插件Validation應(yīng)用的實例講解，需要的朋友可以參考下2015-10-10
jQuery關(guān)鍵詞說明插件cluetip使用指南
我們在做web項目的時候，經(jīng)常會使用到提示效果。html自帶的提示效果是label標(biāo)簽的title，但是這個效果過于簡單和難看，并且不方便調(diào)整樣式。今天我偶然發(fā)現(xiàn)個jQuery的插件，可以很方便的做出漂亮的提示效果。2015-04-04