使用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 相关文章推荐
JS中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
vue3.0生命周期的示例代码
Sep 24 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数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
Python格式化压缩后的JS文件的方法
2015/03/05 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
python用户管理系统的实例讲解
2017/12/23 Python
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
学生党员思想汇报
2013/12/28 职场文书
精彩的英文自荐信
2014/01/30 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
2014年库房工作总结
2014/11/26 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
安全伴我行主题班会
2015/08/13 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
关于 Python json中load和loads区别
2021/11/07 Python