使用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 相关文章推荐
Js+XML 操作
Sep 20 Javascript
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
js中如何完美的解析数据
Mar 18 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 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发送邮件类代码附详细说明
2008/07/10 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
python的正则表达式re模块的常用方法
2013/03/09 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
python之文件读取一行一行的方法
2018/07/12 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
小学开学寄语
2014/01/19 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
询价采购方案
2014/06/09 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
给校长的一封检讨书
2014/09/20 职场文书
党员违纪检讨书
2015/05/05 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
《检阅》教学反思
2016/02/22 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python