使用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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
用 JSON 处理缓存
Apr 27 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
AngularJS中的promise用法分析
May 19 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
jQuery AJAX应用实例总结
May 19 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
PHP递归算法的详细示例分析
2013/02/19 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
JS解析XML的实现代码
2009/11/12 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
判断单链表中是否存在环
2012/07/16 面试题
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
婚前保证书
2014/04/29 职场文书
服务之星事迹材料
2014/05/03 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技