使用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的MessageBox
Dec 03 Javascript
用JQuery 实现的自定义对话框
Mar 24 Javascript
通过隐藏option实现select的联动效果
Nov 10 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
SVG描边动画
Feb 23 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 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中sprintf与printf函数用法区别解析
2014/02/17 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
python基础教程项目三之万能的XML
2018/04/02 Python
Python类装饰器实现方法详解
2018/12/21 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
Python PIL库图片灰化处理
2020/04/07 Python
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
Java基础面试题
2014/07/19 面试题
企事业单位求职者的自我评价
2013/12/28 职场文书
父母对孩子说的话
2014/04/12 职场文书
感恩的演讲稿
2014/05/06 职场文书
聚会通知怎么写
2015/04/23 职场文书
商标侵权律师函
2015/05/27 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
PHP命令行与定时任务
2021/04/01 PHP