使用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控制表格隔行变色
Jun 26 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
javascript canvas时钟模拟器
Jul 13 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 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
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
php实例化一个类的具体方法
2019/09/19 PHP
Js中sort()方法的用法
2006/11/04 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
javascript常用方法汇总
2014/12/02 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
python中的内置函数getattr()介绍及示例
2014/07/20 Python
python实现外卖信息管理系统
2018/01/11 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
20行python代码实现人脸识别
2019/05/05 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
医学检验专业个人求职信范文
2013/12/04 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS