使用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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
webpack实用小功能介绍
Jan 02 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
PHP 函数学习简单小结
2010/07/08 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
js中this的用法实例分析
2015/01/10 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
Python的UTC时间转换讲解
2019/02/26 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
傲盾软件面试题
2015/08/17 面试题
幼儿园五一活动方案
2014/02/07 职场文书
三查三看党性分析材料
2014/02/18 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
行政二审代理词
2015/05/25 职场文书
篮球赛新闻稿
2015/07/17 职场文书
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA