使用jQuery动态加载js脚本文件的方法


Posted in Javascript onApril 03, 2014

它们很强大,但有时候也会得不偿失。如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个js文件。当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法。下面就介绍一下如何使用它!

一、jQuery getScript()方法加载JavaScript

jQuery内置了一个方法可以加载单一的js文件;当加载完成后你可以在回调函数里执行后续操作。最基本的使用jQuery.getScript的方法是这样:

jQuery.getScript("/path/to/myscript.js", function(data, status, jqxhr) {
 /* 
  做一些加载完成后需要执行的事情
 */ 
});

这个getScript方法返回一个jqxhr,你可以像下面这样用它:
jQuery.getScript("/path/to/myscript.js")
 .done(function() {
  /* 耶,没有问题,这里可以干点什么 */
 })
 .fail(function() {
  /* 靠,马上执行挽救操作 */
});

最常见的使用jQuery.getScript的地方是延迟加载一个js插件,而且在加载完成时执行它:

jQuery.getScript("jquery.cookie.js")
 .done(function() {
  jQuery.cookie("cookie_name", "value", { expires: 7 });
});

二、缓存问题

有一个非常重要的问题,使用jQuery.getScript时,你需要用一个时间戳字符串跟在需要加载的js地址后面,防止它被缓存。但是,如果你希望这个脚本被缓存,你需要设置全局缓存变量,像下面这样:

jQuery.ajaxSetup({
  cache: true
});
jQuery.ajax({
      url: "jquery.cookie.js",
      dataType: "script",
      cache: true
}).done(function() {
  jQuery.cookie("cookie_name", "value", { expires: 7 });
});

在加载脚本时一定要小心缓存问题!
Javascript 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
childNodes.length与children.length的区别
May 14 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 #Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 #Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 #Javascript
javascript实现des解密加密全过程
Apr 03 #Javascript
无刷新预览所选择的图片示例代码
Apr 02 #Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 #Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 #Javascript
You might like
Zerg剧情介绍
2020/03/14 星际争霸
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
php实现RSA加密类实例
2015/03/26 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
javascript 获取图片颜色
2009/04/05 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python通过Windows下远程控制Linux系统
2018/06/20 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
详解如何减少python内存的消耗
2019/08/09 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
python mysql中in参数化说明
2020/06/05 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
《蜗牛》教学反思
2014/02/18 职场文书
人事部专员岗位职责
2014/03/04 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
中学推普周活动总结
2015/05/07 职场文书
单位病假条范文
2015/08/17 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript