使用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 相关文章推荐
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
Javascript的无new构建实例详解
May 15 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
微信小程序动态显示项目倒计时
Jun 20 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
详解JSON.stringify()的5个秘密特性
May 26 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批量去除文件UTF8 BOM信息
2013/08/05 PHP
php数组添加元素方法小结
2014/12/20 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
Laravel下生成验证码的类
2017/11/15 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
jquery cookie插件代码类
2009/05/26 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
使用python实现接口的方法
2017/07/07 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
详解Python中第三方库Faker
2020/09/25 Python
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
甜品店的创业计划书范文
2014/01/02 职场文书
公司司机岗位职责
2014/02/07 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
公司年夜饭通知
2015/04/25 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
PHP命令行与定时任务
2021/04/01 PHP
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS