使用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 相关文章推荐
使用JavaScript库还是自己写代码?
Jan 28 Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
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
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
利用jquery写的左右轮播图特效
2014/02/12 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
python如何实现内容写在图片上
2018/03/23 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
python使用minimax算法实现五子棋
2019/07/29 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
如何强制垃圾回收
2015/10/06 面试题
企划主管岗位职责
2013/12/12 职场文书
汽车技术服务英文求职信范文
2014/01/02 职场文书
机房搬迁方案
2014/05/01 职场文书
广播体操比赛口号
2014/06/10 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
坎儿井导游词
2015/02/09 职场文书
捐款仪式主持词
2015/07/04 职场文书
python 爬取天气网卫星图片
2021/06/07 Python
Python使用DFA算法过滤内容敏感词
2022/04/22 Python