使用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 相关文章推荐
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
JSON格式化输出
Nov 10 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
js实现延迟加载的几种方法
Apr 24 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 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
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
重定向实现代码
2006/11/20 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
python在windows下实现备份程序实例
2014/07/04 Python
从Python的源码来解析Python下的freeblock
2015/05/11 Python
详解Python装饰器由浅入深
2016/12/09 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
python 读取.nii格式图像实例
2020/07/01 Python
Python如何输出百分比
2020/07/31 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
this关键字的作用
2016/01/30 面试题
教学实习自我评价
2014/01/28 职场文书
遗嘱继承公证书
2014/04/09 职场文书
户外宣传策划方案
2014/05/25 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
写景作文评语集锦
2014/12/25 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
浅谈PHP7中的一些小技巧
2021/05/29 PHP
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技