使用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实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
详解React-Todos入门例子
Nov 08 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 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
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
php截取视频指定帧为图片
2016/05/16 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
python中正则的使用指南
2016/12/04 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
Python设计密码强度校验程序
2020/07/30 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
奥巴马竞选演讲稿
2014/05/15 职场文书
圣诞节开幕词
2015/01/29 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL