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 相关文章推荐
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
Jquery $.map使用方法实例详解
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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
Oracle 常见问题解答
2006/10/09 PHP
php 表单验证实现代码
2009/03/10 PHP
PHP 缓存实现代码及详细注释
2010/05/16 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
python获取指定网页上所有超链接的方法
2015/04/04 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
Python爬取网页信息的示例
2020/09/24 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
应届生体育教师自荐信
2013/10/03 职场文书
社会公德演讲稿
2014/05/20 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
关于学习的决心书
2015/02/05 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python