使用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实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
js跟随滚动条滚动浮动代码
Dec 31 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
node.js文件操作系统实例详解
Nov 05 Javascript
vscode中Vue别名路径提示的实现
Jul 31 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
php 文件缓存函数
2011/10/08 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
创业计划书的写作技巧及要点
2014/01/31 职场文书
继承公证书
2014/04/09 职场文书
经典演讲稿开场白
2014/08/25 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
老干部座谈会主持词
2015/07/03 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
Java实现学生管理系统(IO版)
2022/02/24 Java/Android