使用jQuery异步加载 JavaScript脚本解决方案


Posted in Javascript onApril 20, 2014

JavaScript 加载器在 Web 开发中是非常强大和有用的工具。目前流行的几个加载器,像 curljs、LABjs 和 RequireJS 使用都很广泛。他们功能强大的,但有些情况下可以有更简单的方案。

如果你正在使用 jQuery,有一个内置的方法可以用来加载脚本。如果你想延迟加载插件或任何其他类型的脚本,都可以使用这种方法。下面给大家介绍如何使用它。

实现方法

jQuery 内置有 getScript 方法来加载一个脚本,处理返回的结果可以有几种方法来实现。最基本的用法 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 的最常见场景是延迟加载一个插件,并在加载后调用它:
jQuery.getScript("jquery.cookie.js") 
.done(function() { 
jQuery.cookie("cookie_name", "value", { expires: 7 }); 
});

如果你需要做更高级的事情,如加载多个脚本和不同类型的文件(文本文件,图像,CSS 文件等),我建议你切换到一个功能更强大的 JavaScript 加载器。如果只想延迟加载插件,而不是简单地在每个页面加载的情况下,getScript 是完美的!

缓存问题

需要注意的是,当使用 jQuery.getScript 的时候,在脚本 URL 后面会自动被添加上时间戳,让脚本不缓存。因此你需要设置让所有的请求都缓存脚本:

jQuery.ajaxSetup({ 
cache: true 
});

如果您不希望覆盖所有的缓存与你的 AJAX 请求,最好使用 jQuery.ajax 方法并把 dataType 设置为 script,例如这样:
jQuery.ajax({ 
url: "jquery.cookie.js", 
dataType: "script", 
cache: true 
}).done(function() { 
jQuery.cookie("cookie_name", "value", { expires: 7 }); 
});

在加载脚本的时候需要特别注意缓存问题!
Javascript 相关文章推荐
SinaEditor使用方法详解
Dec 28 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 #Javascript
判断及设置浏览器全屏模式
Apr 20 #Javascript
js 实现浏览历史记录示例
Apr 20 #Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 #Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 #Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 #Javascript
jQuery响应enter键的实现思路
Apr 18 #Javascript
You might like
PHP Curl多线程原理实例详解
2013/11/06 PHP
ThinkPHP5&5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
pygame实现飞机大战
2020/03/11 Python
python中如何进行连乘计算
2020/05/28 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
简单叙述一下MYSQL的优化
2016/05/09 面试题
销售类个人求职信范文
2013/09/25 职场文书
高一学生评语大全
2014/04/25 职场文书
实习证明格式范文
2014/10/14 职场文书
出国留学导师推荐信
2015/03/26 职场文书
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS