使用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 相关文章推荐
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
让table变成exls的示例代码
Mar 24 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 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
资料注册后发信小技巧
2006/10/09 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
php绘制一条直线的方法
2015/01/24 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
javascript 写类方式之三
2009/07/05 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
JS实现星星海特效
2019/12/24 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
使用python制作一个解压缩软件
2019/11/13 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
详解Python多线程下的list
2020/07/03 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
大学生四年生活自我鉴定
2013/11/21 职场文书
培训心得体会
2013/12/29 职场文书
出纳会计岗位职责
2014/03/12 职场文书
初三开学计划书
2014/04/27 职场文书
生物科学专业自荐书
2014/06/20 职场文书
小学少先队活动总结
2015/05/08 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
Python中使用subprocess库创建附加进程
2021/05/11 Python
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
正确使用MySQL update语句
2021/05/26 MySQL