使用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 相关文章推荐
给Function做的OOP扩展
May 07 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 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读注册表
2006/10/09 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
JS Timing
2007/04/21 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
python实现定时提取实时日志程序
2018/06/22 Python
python 获取url中的参数列表实例
2018/12/18 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
django正续或者倒序查库实例
2020/05/19 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
应用数学自荐书范文
2013/11/24 职场文书
考试违纪检讨书
2014/02/02 职场文书
大学学习计划书范文
2014/05/02 职场文书
副处级干部考察材料
2014/05/17 职场文书
就职演讲稿范文
2014/05/19 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
财务工作检讨书
2014/10/29 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
PHP实现两种排课方式
2021/06/26 PHP
canvas实现贪食蛇的实践
2022/02/15 Javascript
一级电子管军用接收机测评
2022/04/05 无线电
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers
Go语言编译原理之源码调试
2022/08/05 Golang