使用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检测页面是否缩放的小例子
May 16 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
Node.js Domain 模块实例详解
Mar 18 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
javascript实现简易计算器功能
Sep 23 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防注入及开发安全详细解析
2013/08/09 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
模拟select的代码
2011/10/19 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python ldap实现登录实例代码
2016/09/30 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
自荐书封面下载
2013/11/29 职场文书
最受欢迎的自我评价
2013/12/22 职场文书
带薪年假请假条
2014/02/04 职场文书
企业文化演讲稿
2014/05/20 职场文书
活动总结报告怎么写
2014/07/03 职场文书
快递员岗位职责
2014/09/12 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
天河观后感
2015/06/11 职场文书
运动会开幕式主持词
2015/07/01 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python