使用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 相关文章推荐
jQuery 技巧大全(新手入门篇)
May 12 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
uniapp开发小程序的经验总结
Apr 08 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中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
JQuery autocomplete 使用手册
2010/04/01 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
十个Python程序员易犯的错误
2015/12/15 Python
详谈python read readline readlines的区别
2017/09/22 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
大学生毕业自我鉴定范文
2013/11/03 职场文书
配件采购员岗位职责
2013/12/03 职场文书
管理学专业个人求职信范文
2013/12/13 职场文书
期末自我鉴定
2014/02/02 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
信仰观后感
2015/06/03 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
python数字类型和占位符详情
2022/03/13 Python