使用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 代码的方法小结
Jul 16 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
Vue实现简易计算器
Feb 25 Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
Vue实现圆环进度条的示例
Feb 06 Vue.js
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
坏狼的PHP学习教程之第1天
2008/06/15 PHP
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
js命名空间写法示例
2015/12/18 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
js实现秒表计时器
2019/12/16 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
Python文件及目录操作实例详解
2015/06/04 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
解决python删除文件的权限错误问题
2018/04/24 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
《春雨》教学反思
2014/04/24 职场文书
还款承诺书范文
2014/05/20 职场文书
教师节主持词开场白
2015/05/29 职场文书