使用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 相关文章推荐
JScript中的undefined和"undefined"的区别
Mar 08 Javascript
Javascript 中介者模式实例
Dec 16 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
实例解析Array和String方法
Dec 14 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 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 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
JS event使用方法详解
2008/04/28 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
解决Spyder中图片显示太小的问题
2018/04/27 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
python函数的万能参数传参详解
2019/07/26 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
python 函数中的参数类型
2020/02/11 Python
python3注册全局热键的实现
2020/03/22 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
python 如何实现遗传算法
2020/09/22 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
教师职称自我鉴定
2014/02/12 职场文书
大学生评语大全
2014/04/18 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
Go并发4种方法简明讲解
2022/04/06 Golang