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实现可拖动进度条实例代码
Jun 21 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 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初学者最感迷茫的问题小结
2010/03/27 PHP
php发送与接收流文件的方法
2015/02/11 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
python获取指定时间差的时间实例详解
2017/04/11 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
Python当中的array数组对象实例详解
2019/06/12 Python
python交易记录链的实现过程详解
2019/07/03 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
进程的查看和调度分别使用什么命令
2013/12/14 面试题
建筑工程专业大学生求职信
2014/04/23 职场文书
交通事故协议书范本
2014/11/18 职场文书
大学毕业生自我评价
2015/03/02 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书