使用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中的对象 推荐
Jan 09 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
JS写滑稽笑脸运动效果
May 28 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扩展函数
2006/10/09 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
windows下python安装小白入门教程
2018/09/18 Python
python中的decimal类型转换实例详解
2019/06/26 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
存储过程和函数的区别
2013/05/28 面试题
商场总经理岗位职责
2014/02/03 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
授权委托书
2014/07/31 职场文书
庆七一活动总结
2014/08/27 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书