jQuery實現(xiàn)動態(tài)加載(按需加載)javascript文件的方法分析

更新時間：2019年05月31日 09:28:45 作者：輕舞肥羊

這篇文章主要介紹了jQuery實現(xiàn)動態(tài)加載(按需加載)javascript文件的方法,結(jié)合實例形式分析了jQuery根據(jù)調(diào)用函數(shù)按需動態(tài)加載javascript文件相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)動態(tài)加載(按需加載)javascript文件的方法。分享給大家供大家參考，具體如下：

為了提高網(wǎng)頁程序的性能，在很多情況下javascript 是按需加載，而不是全部寫在 <head>里面。利用jQuery可以很方便的實現(xiàn)按需加載js.

$("#load").click(function(){
  $.getScript('helloworld.js', function() {
     $("#content").html('js 加載成功!');
  });
});

當(dāng)id為“l(fā)oad" 的按鈕被點擊之后，將會動態(tài)加載 helloword.js , 然后就可以執(zhí)行里面的方法。

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
 <h1>利用 jQuery 動態(tài)加載 js</h1>
<div id="content"></div>
<br/>
<button id="load">Load JavaScript</button>
<button id="sayHello">Say Hello</button>
<script type="text/javascript">
$("#load").click(function(){
 $.getScript('js-example/helloworld.js', function() {
   $("#content").html('
     Javascript is loaded successful! sayHello() function is loaded!
   ');
 });
});
$("#sayHello").click(function(){
 sayHello();
});
</script>
</body>
</html>

其中 helloworld.js 的代碼如下:

function sayHello(){
  alert("Hello ~我是動態(tài)加載的!");
}

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery easyui datagrid動態(tài)查詢數(shù)據(jù)實例講解
接下來將從前臺提交查詢條件，從MSSQL返回json數(shù)據(jù)的一個事例來講解一下datagrid動態(tài)查詢數(shù)據(jù)，感興趣的你可不要錯過了哈，希望本文可以幫助到你
2013-02-02
基于Jquery實現(xiàn)表單驗證
本文給大家分享的是一段基于Jquery實現(xiàn)表單驗證的代碼，非常簡單實用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-08-08
jQuery AJAX與jQuery事件的分析講解
今天小編就為大家分享一篇關(guān)于jQuery AJAX與jQuery事件的分析講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-02-02
jQuery EasyUI學(xué)習(xí)教程之datagrid點擊列表頭排序
這篇文章主要介紹了jQuery EasyUI學(xué)習(xí)教程之datagrid點擊列表頭排序的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07
jQuery通過點擊行來刪除HTML表格行的實現(xiàn)示例
從一個HTML表使用一些時髦的效果，只要按一下該行，改行即可被刪除，這個示例比較簡單，新手朋友們可以學(xué)習(xí)下
2014-09-09
jQuery aminate方法定位到頁面具體位置
jQuery如何定位到頁面具體位置，我們可以通過jQuery的aminate動畫方法定位，下面有個不粗的示例，感興趣的朋友可以參考下
2013-12-12
jQuery animate效果演示
一個簡單的animate函數(shù)嘗試，這個效果在web應(yīng)用中非常的實用，提供大家參考！
2009-10-10
使用JQUERY Tabs插件宿主IFRAMES
這篇文章提供了一個使用asp.net和JQuery UI Tabs plug-in用IFRAME元素去宿主web頁面。
2010-01-01
jquery提示效果實例分析
這篇文章主要介紹了jquery提示效果,以一個簡單實例較為詳細的分析了jQuery提示效果的實現(xiàn)方法與相關(guān)注意事項,具有一定的參考借鑒價值,需要的朋友可以參考下
2014-11-11
基于jquery的$.ajax async使用
默認設(shè)置下，所有請求均為異步請求。如果需要發(fā)送同步請求，請將此選項設(shè)置為 false。注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執(zhí)行
2011-10-10