实用技巧:使用 jQuery 异步加载 JavaScript 脚本
JavaScript 加载器在 Web 开发中是非常强大和有用的工具。目前流行的几个加载器,像 curljs、LABjs 和 RequireJS 使用都很广泛。他们功能强大的,但有些情况下可以有更简单的方案。
如果你正在使用 jQuery,有一个内置的方法可以用来加载脚本。如果你想延迟加载插件或任何其他类型的脚本,都可以使用这种方法。下面给大家介绍如何使用它。
实现方法
jQuery 内置有 getScript 方法来加载一个脚本,处理返回的结果可以有几种方法来实现。最基本的用法 jQuery.getScript 看起来像这样:
1
2
3
4
5
6
7
|
jQuery.getScript( "/path/to/myscript.js" , function (data, status, jqxhr) {
/*
在脚本已载入并执行后,就可以做一些处理了
*/
});
|
getScript 方法返回一个 jqXHR 对象,因此可以这样使用:
1
2
3
4
5
6
7
|
jQuery.getScript( "/path/to/myscript.js" )
.done( function () {
/* 执行成功后的处理 */
})
.fail( function () {
/* 执行失败后的处理 */
});
|
使用 jQuery.getScript 的最常见场景是延迟加载一个插件,并在加载后调用它:
1
2
3
4
|
jQuery.getScript( "jquery.cookie.js" )
.done( function () {
jQuery.cookie( "cookie_name" , "value" , { expires: 7 });
});
|
如果你需要做更高级的事情,如加载多个脚本和不同类型的文件(文本文件,图像,CSS 文件等),我建议你切换到一个功能更强大的 JavaScript 加载器。如果只想延迟加载插件,而不是简单地在每个页面加载的情况下,getScript 是完美的!
缓存问题
需要注意的是,当使用 jQuery.getScript 的时候,在脚本 URL 后面会自动被添加上时间戳,让脚本不缓存。因此你需要设置让所有的请求都缓存脚本:
1
2
3
|
jQuery.ajaxSetup({
cache: true
});
|
如果您不希望覆盖所有的缓存与你的 AJAX 请求,最好使用 jQuery.ajax 方法并把 dataType 设置为 script,例如这样:
1
2
3
4
5
6
7
|
jQuery.ajax({
url: "jquery.cookie.js" ,
dataType: "script" ,
cache: true
}).done( function () {
jQuery.cookie( "cookie_name" , "value" , { expires: 7 });
});
|
在加载脚本的时候需要特别注意缓存问题!
实用技巧:使用 jQuery 异步加载 JavaScript 脚本相关推荐
- google android广告异步加载,javascript 广告后加载,加载完页面再加载广告
先加载完页面再加载广告的原理: 网页打开的顺序都是按页面从上到下的顺序加载完成的,所以要想使广告不影响页面打开速度,就要等页面全部打开完成后,再加载JS代码.等页面加载完再加载广告其实就是将广告的 J ...
- 了解无阻塞加载javascript脚本技术
偶然间看到这样一篇博客,内容很详细,概念解释的也很通俗,转过来与大家分享一下,学习学习. 原文转自:http://ghdcblog.cn/article/%E4%BA%86%E8%A7%A3%E6%9 ...
- Qt实用技巧:使用Qt加载超大图片的耗时测试
若该文为原创文章,未经允许不得转载 原博主博客地址:https://blog.csdn.net/qq21497936 原博主博客导航:https://blog.csdn.net/qq21497936/ ...
- html异步加载页面,Jquery异步加载页面(load)
想实现Jquery 加载完页面内容再显示出内容来吗?使用 load函数即可实现 2010-05-21 话不多说,上图先. 第一步: 第二步 点击"load 1"按钮.出现&quo ...
- qt快速加载图片_Qt实用技巧:使用Qt加载超大图片的耗时测试
需求 某机器人项目中,需要加载构建的地图,此处仅测试直接加载图片的时间. 相关博客 测试代码 QString path; path = "./map/1.png"; QFileIn ...
- 加载JavaScript脚本方式
1.静态加载: 1. <script>... ...</script>直接写入HTML文件 2. <script src="xxx.js">&l ...
- jQuery异步加载数据并添加事件示例
当时项目是通过树形栏进行权限控制的,管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作,可是用$(".XX").click();方法是不行的. 1.之前用的是jq1.4.3 ...
- JavaScript异步加载,解决js阻塞
1.defer: 在script标签里添加defer,用于外部链接js文件,也可以异步加载内部脚本,会等待dom树生成后再执行js脚本代码 <script src="01.js&quo ...
- 网页性能优化之异步加载js文件
一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件.在谈异步加载之前,先来看看浏览器加载js文件的原理. 浏览器加载 JavaScript 脚本,主要通过<scri ...
最新文章
- 特斯拉再裁员3000多人,马斯克称别无选择
- sql server 2005 (select查询语句用法)
- 不超过20位的小数正则_意甲身价最贵的20位球星,国米多达7人超过尤文,夺冠成硬任务...
- 手把手教你用Pandas读取所有主流数据存储
- 无人车首例阵亡事件,AI教育春江水暖
- 数塔 简单的 动态规划
- 【ISWC2021】当知识图谱遇上零样本视觉问答
- python模块 - functools模块
- android 蓝牙设备断开,android 程序屏幕旋转,蓝牙设备断开导致的MainActivity重新创建问题...
- Java编程练习题2
- iOS APP 逆向安全杂谈
- 设计模式-访问者模式-java-中文版
- linux桌面壁纸目录,[多图]回顾每一款默认Ubuntu壁纸
- 下手重了,我把同事小刘的腿打断了...
- 《概率论与数理统计》学习笔记
- CentOS7 阻止笔记本合盖时休眠
- TIA博途中无法添加HSP硬件支持包的解决办法
- OCA,OCP,OCM傻傻分不清?
- 服务器操作系统版本查询,服务器操作系统版本查询
- Realtek RTL8762C/Realtek RTL8762D学习记录