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 脚本相关推荐

  1. google android广告异步加载,javascript 广告后加载,加载完页面再加载广告

    先加载完页面再加载广告的原理: 网页打开的顺序都是按页面从上到下的顺序加载完成的,所以要想使广告不影响页面打开速度,就要等页面全部打开完成后,再加载JS代码.等页面加载完再加载广告其实就是将广告的 J ...

  2. 了解无阻塞加载javascript脚本技术

    偶然间看到这样一篇博客,内容很详细,概念解释的也很通俗,转过来与大家分享一下,学习学习. 原文转自:http://ghdcblog.cn/article/%E4%BA%86%E8%A7%A3%E6%9 ...

  3. Qt实用技巧:使用Qt加载超大图片的耗时测试

    若该文为原创文章,未经允许不得转载 原博主博客地址:https://blog.csdn.net/qq21497936 原博主博客导航:https://blog.csdn.net/qq21497936/ ...

  4. html异步加载页面,Jquery异步加载页面(load)

    想实现Jquery 加载完页面内容再显示出内容来吗?使用 load函数即可实现 2010-05-21 话不多说,上图先. 第一步: 第二步  点击"load 1"按钮.出现&quo ...

  5. qt快速加载图片_Qt实用技巧:使用Qt加载超大图片的耗时测试

    需求 某机器人项目中,需要加载构建的地图,此处仅测试直接加载图片的时间. 相关博客 测试代码 QString path; path = "./map/1.png"; QFileIn ...

  6. 加载JavaScript脚本方式

    1.静态加载: 1. <script>... ...</script>直接写入HTML文件 2. <script src="xxx.js">&l ...

  7. jQuery异步加载数据并添加事件示例

    当时项目是通过树形栏进行权限控制的,管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作,可是用$(".XX").click();方法是不行的. 1.之前用的是jq1.4.3 ...

  8. JavaScript异步加载,解决js阻塞

    1.defer: 在script标签里添加defer,用于外部链接js文件,也可以异步加载内部脚本,会等待dom树生成后再执行js脚本代码 <script src="01.js&quo ...

  9. 网页性能优化之异步加载js文件

    一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件.在谈异步加载之前,先来看看浏览器加载js文件的原理. 浏览器加载 JavaScript 脚本,主要通过<scri ...

最新文章

  1. 特斯拉再裁员3000多人,马斯克称别无选择
  2. sql server 2005 (select查询语句用法)
  3. 不超过20位的小数正则_意甲身价最贵的20位球星,国米多达7人超过尤文,夺冠成硬任务...
  4. 手把手教你用Pandas读取所有主流数据存储
  5. 无人车首例阵亡事件,AI教育春江水暖
  6. 数塔 简单的 动态规划
  7. 【ISWC2021】当知识图谱遇上零样本视觉问答
  8. python模块 - functools模块
  9. android 蓝牙设备断开,android 程序屏幕旋转,蓝牙设备断开导致的MainActivity重新创建问题...
  10. Java编程练习题2
  11. iOS APP 逆向安全杂谈
  12. 设计模式-访问者模式-java-中文版
  13. linux桌面壁纸目录,[多图]回顾每一款默认Ubuntu壁纸
  14. 下手重了,我把同事小刘的腿打断了...
  15. 《概率论与数理统计》学习笔记
  16. CentOS7 阻止笔记本合盖时休眠
  17. TIA博途中无法添加HSP硬件支持包的解决办法
  18. OCA,OCP,OCM傻傻分不清?
  19. 服务器操作系统版本查询,服务器操作系统版本查询
  20. Realtek RTL8762C/Realtek RTL8762D学习记录

热门文章

  1. 以太网数据包、IP包、TCP/UDP 包的结构(转)
  2. 修改CodeSmith中的SchemaExplorer.MySQLSchemaProvider
  3. 设计模式之 Singleton 单例模式
  4. [导入]使用tomcat5.0自带的连接池
  5. 高通camera驱动分析
  6. 如何将dtb反编译成dts
  7. MTK 平台上查询当前使用的摄像头模组及所支持预览分辨率
  8. python3邮件_python3使用SMTP发送HTML格式邮件
  9. eclipse 配置打开工作空间
  10. 使用jmeter测试工具完成文件的上传