jQuery实现动态加载(按需加载)javascript文件的方法分析


Posted in jQuery onMay 31, 2019

本文实例讲述了jQuery实现动态加载(按需加载)javascript文件的方法。分享给大家供大家参考,具体如下:

为了提高网页程序的性能,在很多情况下javascript 是按需加载,而不是全部写在 <head>里面。利用jQuery可以很方便的实现按需加载js.

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

当id为“load" 的按钮被点击之后,将会动态加载 helloword.js , 然后就可以执行里面的方法。

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
 <h1>利用 jQuery 动态加载 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 ~我是动态加载的!");
}

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
详解jQuery的核心函数和事件处理
Feb 18 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 #jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 #jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 #jQuery
jquery操作select常见方法大全【7种情况】
May 28 #jQuery
jQuery实现高级检索功能
May 28 #jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 #jQuery
jquery实现动态创建form并提交的方法示例
May 27 #jQuery
You might like
PHP模板引擎SMARTY
2006/10/09 PHP
PHP控制网页过期时间的代码
2008/09/28 PHP
PHP在线生成二维码代码(google api)
2013/06/03 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
Python和Java进行DES加密和解密的实例
2018/01/09 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
np.dot()函数的用法详解
2020/01/17 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
解决python3输入的坑——input()
2020/12/05 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
机电工程学生自荐信范文
2013/12/07 职场文书
董存瑞观后感
2015/06/11 职场文书
欢送领导祝酒词
2015/08/12 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server