使用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 06 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
vue数字类型过滤器的示例代码
Sep 07 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 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
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
PHP递归算法的简单实例
2019/02/28 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
Angular.js中数组操作的方法教程
2017/07/31 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
Python中super的用法实例
2015/05/28 Python
Python 备份程序代码实现
2017/03/06 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
银行行长竞聘演讲稿
2014/04/23 职场文书
消防隐患整改通知书
2015/04/22 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
python图像处理 PIL Image操作实例
2022/04/09 Python
vue判断按钮是否可以点击
2022/04/09 Vue.js
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS