使用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 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
js创建数组的简单方法
Jul 27 Javascript
vue构建单页面应用实战
Apr 10 Javascript
Vue中使用vux的配置详解
May 05 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 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类
2006/10/09 PHP
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
PHP 实用代码收集
2010/01/22 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
php自动加载代码实例详解
2021/02/26 PHP
js 三级关联菜单效果实例
2013/08/13 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
python交互式图形编程实例(一)
2017/11/17 Python
Django如何配置mysql数据库
2018/05/04 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
python如何更新包
2020/06/11 Python
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
招聘专员岗位职责
2014/03/07 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
汽车促销活动方案
2014/03/31 职场文书
房屋出租委托书格式
2014/09/23 职场文书
档案管理员岗位职责
2015/02/12 职场文书
感恩父母主题班会
2015/08/12 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
Python Pandas解析读写 CSV 文件
2022/04/11 Python