使用jQuery异步加载 JavaScript脚本解决方案


Posted in Javascript onApril 20, 2014

JavaScript 加载器在 Web 开发中是非常强大和有用的工具。目前流行的几个加载器,像 curljs、LABjs 和 RequireJS 使用都很广泛。他们功能强大的,但有些情况下可以有更简单的方案。

如果你正在使用 jQuery,有一个内置的方法可以用来加载脚本。如果你想延迟加载插件或任何其他类型的脚本,都可以使用这种方法。下面给大家介绍如何使用它。

实现方法

jQuery 内置有 getScript 方法来加载一个脚本,处理返回的结果可以有几种方法来实现。最基本的用法 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 的最常见场景是延迟加载一个插件,并在加载后调用它:
jQuery.getScript("jquery.cookie.js") 
.done(function() { 
jQuery.cookie("cookie_name", "value", { expires: 7 }); 
});

如果你需要做更高级的事情,如加载多个脚本和不同类型的文件(文本文件,图像,CSS 文件等),我建议你切换到一个功能更强大的 JavaScript 加载器。如果只想延迟加载插件,而不是简单地在每个页面加载的情况下,getScript 是完美的!

缓存问题

需要注意的是,当使用 jQuery.getScript 的时候,在脚本 URL 后面会自动被添加上时间戳,让脚本不缓存。因此你需要设置让所有的请求都缓存脚本:

jQuery.ajaxSetup({ 
cache: true 
});

如果您不希望覆盖所有的缓存与你的 AJAX 请求,最好使用 jQuery.ajax 方法并把 dataType 设置为 script,例如这样:
jQuery.ajax({ 
url: "jquery.cookie.js", 
dataType: "script", 
cache: true 
}).done(function() { 
jQuery.cookie("cookie_name", "value", { expires: 7 }); 
});

在加载脚本的时候需要特别注意缓存问题!
Javascript 相关文章推荐
Jquery中基本选择器用法实例详解
May 18 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
js函数模拟显示桌面.scf程序示例
Apr 20 #Javascript
判断及设置浏览器全屏模式
Apr 20 #Javascript
js 实现浏览历史记录示例
Apr 20 #Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 #Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 #Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 #Javascript
jQuery响应enter键的实现思路
Apr 18 #Javascript
You might like
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
你必须知道的Javascript知识点之"单线程事件驱动"的使用
2013/04/23 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
python实现划词翻译
2020/04/23 Python
Python下singleton模式的实现方法
2014/07/16 Python
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
老生常谈Python基础之字符编码
2017/06/14 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
python实现Windows电脑定时关机
2018/06/20 Python
Python闭包函数定义与用法分析
2018/07/20 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
Django配置文件代码说明
2019/12/04 Python
python获取引用对象的个数方式
2019/12/20 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
行政专员岗位职责
2014/01/02 职场文书
书法培训心得体会
2014/01/05 职场文书
骨干教师培训感言
2014/01/16 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
中学校庆方案
2014/03/17 职场文书
员工保密协议书
2014/09/27 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
详解JS数组方法
2021/11/20 Javascript