使用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 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
prototype Element学习笔记(篇二)
Oct 26 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
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模板类代码
2008/09/07 PHP
php smarty函数扩展
2010/03/15 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
电子商务专业个人的自我评价分享
2013/10/29 职场文书
通信工程毕业生求职信
2013/11/16 职场文书
大学生村官任职感言
2014/01/09 职场文书
老公爱的承诺书
2014/03/31 职场文书
品牌推广策划方案
2014/05/28 职场文书
总经理任命书范本
2014/06/05 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
浅析Python实现DFA算法
2021/06/26 Python