使用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类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
老生常谈js中的MVC
Jul 25 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
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类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
Python urlopen 使用小示例
2008/09/06 Python
简单谈谈python中的多进程
2016/11/06 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
python如何停止递归
2020/09/09 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
家居设计专业个人自荐信范文
2013/11/26 职场文书
《小池塘》教学反思
2014/02/28 职场文书
服务口号大全
2014/06/11 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
教师继续教育反思周记
2015/06/25 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书