使用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 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
JS实现拖动示例代码
Nov 01 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
jQuery 选择器详解
Jan 19 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
Jquery-data的三种用法
Apr 18 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
Vue中使用vee-validate表单验证的方法
May 09 Javascript
html5调用摄像头截图功能
Jan 18 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伪静态的实现方法解析
2020/07/31 PHP
JS array 数组详解
2009/03/22 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
用js实现放大镜效果
2020/10/28 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
Python实现豆瓣图片下载的方法
2015/05/25 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
python开发入门——set的使用
2020/09/03 Python
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
高中生家长会演讲稿
2014/01/14 职场文书
模具毕业生推荐信
2014/02/15 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
总经理助理的职责
2014/03/14 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
绿色城市实施方案
2014/03/19 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
周年庆典答谢词
2015/01/20 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
焦裕禄观后感
2015/06/03 职场文书
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python