使用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 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
javascript实现移动端轮播图
Dec 09 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
拼音码表的生成
2006/10/09 PHP
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
php常用正则函数实例小结
2016/12/29 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
Python中isnumeric()方法的使用简介
2015/05/19 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
详解django中自定义标签和过滤器
2017/07/03 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
python实现猜拳小游戏
2020/04/05 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
大学生毕业求职的自我评价
2013/09/29 职场文书
表彰大会主持词
2014/03/26 职场文书
公司承诺书范文
2014/05/19 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
劳动模范获奖感言
2015/07/31 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python