使用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的数组的扩展实例代码
Jul 09 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 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制作图形验证码代码分享
2014/10/23 PHP
php函数与传递参数实例分析
2014/11/15 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
Python的迭代器和生成器使用实例
2015/01/14 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
python进行两个表格对比的方法
2018/06/27 Python
python实现Flappy Bird源码
2018/12/24 Python
python多进程使用函数封装实例
2020/05/02 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
英国现代绅士品牌:Hackett
2017/12/17 全球购物
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
应届大学生自荐信
2013/12/05 职场文书
房屋出租协议书
2014/04/10 职场文书
中国梦团日活动总结
2014/07/07 职场文书
2014年网管工作总结
2014/12/11 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers