使用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事件的属性列表
Mar 01 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
Javascript实现单例模式
Jan 24 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
基于node.js之调试器详解
Aug 22 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
js实现延迟加载的几种方法详解
Jan 19 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正确配置mysql(apache环境)
2011/08/28 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
javascript常用函数(1)
2015/11/04 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
BootStrap中
2016/12/10 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
Python 解析XML文件
2009/04/15 Python
python中sleep函数用法实例分析
2015/04/29 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
Python读取csv文件实例解析
2019/12/30 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
毕业生求职简历的自我评价
2013/10/23 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
水电施工员岗位职责
2015/04/11 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
千万级用户系统SQL调优实战分享
2022/03/03 MySQL
MySQL创建管理LIST分区
2022/04/13 MySQL
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL