使用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实现的批量图片预览加载功能
Aug 14 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
解决Layui数据表格的宽高问题
Sep 28 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
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
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
python统计一个文本中重复行数的方法
2014/11/19 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
python实现用户答题功能
2018/01/17 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
python join方法使用详解
2019/07/30 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
Python中url标签使用知识点总结
2020/01/16 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
值传递还是引用传递
2015/02/08 面试题
前厅收银主管岗位职责
2014/02/04 职场文书
公诉意见书范文
2015/06/05 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle