使用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 脚本将当地时间转换成其它时区
Mar 19 Javascript
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
Jquery下:nth-child(an+b)的使用注意
May 28 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 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
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
快速开发一个PHP扩展图文教程
2008/12/12 PHP
php文件缓存类汇总
2014/11/21 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
写的htc的数据表格
2007/01/20 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
在centos7中分布式部署pyspider
2017/05/03 Python
python requests.post带head和body的实例
2019/01/02 Python
Python3中的bytes和str类型详解
2019/05/02 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
大学班长的职责
2014/01/27 职场文书
应届毕业生自荐书
2014/06/18 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
学生偷窃检讨书
2014/09/25 职场文书
Python何绘制带有背景色块的折线图
2022/04/23 Python
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python