使用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 相关文章推荐
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
laypage.js分页插件使用方法详解
Jul 27 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
最常用的8款PHP调试工具
2014/07/06 PHP
Chrome Web App开发小结
2014/09/04 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
详解JavaScript执行模型
2020/11/16 Javascript
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
python3中zip()函数使用详解
2018/06/29 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
Python eval函数原理及用法解析
2020/11/14 Python
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
吃空饷专项整治方案
2014/10/27 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
建党伟业电影观后感
2015/06/01 职场文书
新入职员工工作总结
2015/10/15 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
python requests模块的使用示例
2021/04/07 Python
美元符号 $
2022/02/17 杂记
Python Matplotlib绘制动画的代码详解
2022/05/30 Python