使用jQuery动态加载js脚本文件的方法


Posted in Javascript onApril 03, 2014

它们很强大,但有时候也会得不偿失。如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个js文件。当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法。下面就介绍一下如何使用它!

一、jQuery getScript()方法加载JavaScript

jQuery内置了一个方法可以加载单一的js文件;当加载完成后你可以在回调函数里执行后续操作。最基本的使用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的地方是延迟加载一个js插件,而且在加载完成时执行它:

jQuery.getScript("jquery.cookie.js")
 .done(function() {
  jQuery.cookie("cookie_name", "value", { expires: 7 });
});

二、缓存问题

有一个非常重要的问题,使用jQuery.getScript时,你需要用一个时间戳字符串跟在需要加载的js地址后面,防止它被缓存。但是,如果你希望这个脚本被缓存,你需要设置全局缓存变量,像下面这样:

jQuery.ajaxSetup({
  cache: true
});
jQuery.ajax({
      url: "jquery.cookie.js",
      dataType: "script",
      cache: true
}).done(function() {
  jQuery.cookie("cookie_name", "value", { expires: 7 });
});

在加载脚本时一定要小心缓存问题!
Javascript 相关文章推荐
javascript对象之内置对象Math使用方法
Apr 16 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
JS实现分页导航效果
Feb 19 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 #Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 #Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 #Javascript
javascript实现des解密加密全过程
Apr 03 #Javascript
无刷新预览所选择的图片示例代码
Apr 02 #Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 #Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 #Javascript
You might like
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
python实现二维插值的三维显示
2018/12/17 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
python操作redis数据库的三种方法
2020/09/10 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
镇创先争优活动总结
2014/08/28 职场文书
党员倡议书
2015/01/19 职场文书
实习单位意见
2015/06/04 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书