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 Easyui实现登陆框界面
Jul 10 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
详解jquery和vue对比
Apr 16 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jQuery实现计算器功能
Oct 19 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 cookis创建实现代码
2009/03/16 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
Python编程之序列操作实例详解
2017/07/22 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
专科毕业生自我鉴定
2013/12/01 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
爱的教育观后感
2015/06/17 职场文书
小学三年级作文之写景
2019/11/05 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js