实用技巧:使用 jQuery 异步加载 JavaScript 脚本
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 });
- });
在加载脚本的时候需要特别注意缓存问题!
英文链接:Loading Scripts with jQuery via davidwalsh
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
实用技巧:使用 jQuery 异步加载 JavaScript 脚本的更多相关文章
- 谈谈异步加载JavaScript
前言 关于JavaScript脚本加载的问题,相信大家碰到很多.主要在几个点—— 1> 同步脚本和异步脚本带来的文件加载.文件依赖及执行顺序问题 2> 同步脚本和异步脚本带来的性能优化问题 ...
- 页面异步加载javascript文件
昨天听一同事说的异步加载js文件,可以提高页面加载速度.具体方法如下:(function() { var ga = document.createElement('script'); ga.type ...
- 探真无阻塞加载javascript脚本技术,我们会发现很多意想不到的秘密
下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问 ...
- 使用jQuery动态加载js脚本
动态加载Javascript是一项非常强大且有用的技术.这方面的主题在本站已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js.它们很强大,但有时候也会得不偿失.如果你使 ...
- 使用jQuery动态加载js脚本文件的方法
动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使 ...
- loadjs异步加载javascript回调
function loadjs(url,callback){ var script=document.createElement('script'); script.type=" ...
- jquery异步加载json格式的数据
1.直接使用$.getJSON()方法是加载不了与静态界面同级别的本地的json后缀的文件. 2.解决办法:将json后缀的文件改为js后缀,这样就相当于加载了一个js文件. 解决办法:用$.getS ...
- 对动态加载javascript脚本的研究
有时我们需要在javascript脚本中创建js文件,那么在javascript脚本中创建的js文件又是如何执行的呢?和我们直接在HTML页面种写一个script标签的效果是一样的吗?(关于页面scr ...
- Android中WebView如何加载JavaScript脚本
主Activity和XML布局,末尾附上效果图 package com.example.myapplication; import androidx.appcompat.app.AppCompatAc ...
随机推荐
- 在configure distribution时遇到错误,不能打开sql agent
今天在配置Distribution时,遇到一个错误,不能打开sql agent,详细错误信息如下: SQL Server blocked access to procedure 'dbo.sp_set ...
- java向mysql数据库插入数据显示乱码的问题
在做一个java web工程时,有时会碰到在向数据库添加数据库时,结果出现乱码”???“的问题.针对该问题的主要解决办法就是: 一.确保是否添加了字符集过滤器: 在java web工程中的web.xm ...
- [OpenCV] Samples 11: image sequence
一帧一帧地读取视频流. VideoCapture sequence(file_video); sequence >> image. #include <opencv2/core/co ...
- 理论到实践,A/B测试不得不直面的4个统计学问题
有放回?无放回? 从总体中随机抽取一个容量为n的样本,当样本容量 n足够大(通常要求n ≥30)时,无论总体是否符合正态分布,样本均值都会趋于正态分布.期望和总体相同,方差为总体的1/n.这即是中心极 ...
- Datatables 在asp.net mvc中的使用
前言 最近使用ABP(ASP.NET Boilerplate)做新项目,以前都是自己扩展一个HtmlHelper来完成同步/异步分页,但是有个地方一直不满意,排序太费劲. 以前接触过一点点的Datat ...
- [转载]UML用例图总结
前言 用例图主要用来描述“用户.需求.系统功能单元”之间的关系.它展示一个外部用户能够观察到的系统功能模型图.用例图多用于静态建模阶段(主要是业务建模和需求建模),帮助开发团队以一种可视化的方式理解系 ...
- G++ 参数介绍(转载)
g++参数介绍 From: http://www.cnblogs.com/lidan/archive/2011/05/25/2239517.html gcc and g++分别是gnu的c & ...
- LocationManager使用细节
在使用系统的LocationManager请求地理位置的时候,请特别注意一个很小的细节,调用 requestLocationUpdates 以后,请记得[自己]设置一个timeout值,否则在某些情况 ...
- 用Vue实现一个全选指令
最近用vue做了两个项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二个项目用指令来实现,用起来,发觉指令更加方便. 第一次做全选的时候是刚开始接触v ...
- 自定义视图引擎,实现MVC主题快速切换
一个网站的主题包括布局,色调,内容展示等,每种主题在某些方面应该或多或少不一样的,否则就不能称之为不同的主题了.每一个网站至少都有一个主题,我这里称之为默认主题,也就是我们平常开发设计网站时的一个固定 ...