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和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
jquery实现图片放大镜效果
Dec 23 jQuery
使用jquery实现轮播图效果
Jan 02 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缓存技术详细总结
2013/08/07 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
自动化专业个人求职信范文
2013/12/30 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
建筑学专业自荐书
2014/07/09 职场文书
党支部对照检查材料
2014/08/25 职场文书
综治工作心得体会
2014/09/11 职场文书
学雷锋感言
2015/08/03 职场文书
旅游安全责任协议书
2016/03/22 职场文书
这样写python注释让代码更加的优雅
2021/06/02 Python