使用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实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
JS中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
SVG描边动画
Feb 23 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
vue.js项目nginx部署教程
Apr 05 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
layui 阻止图片上传的实例(before方法)
Sep 26 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中定时计划任务的实现原理
2013/01/08 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
python实现京东秒杀功能
2018/07/30 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
python db类用法说明
2020/07/07 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
三星印度官网:Samsung印度
2019/08/03 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
进程的查看和调度分别使用什么命令
2015/03/25 面试题
自荐书格式
2013/12/01 职场文书
本科生自荐信
2014/06/18 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
springcloud之Feign超时问题的解决
2021/06/24 Java/Android