使用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 的 trim 函数的代码
Aug 13 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
javascript用函数实现对象的方法
May 14 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
学习Vue组件实例
Apr 28 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 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下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
python支持断点续传的多线程下载示例
2014/01/16 Python
Python实现购物车功能的方法分析
2017/11/10 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
Django 路由控制的实现
2019/07/17 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
计算机通信专业推荐信
2014/02/22 职场文书
新农村建设标语
2014/06/24 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
员工工作表扬信
2015/05/05 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript