实用技巧:使用 jQuery 异步加载 JavaScript 脚本
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 });
});
在加载脚本的时候需要特别注意缓存问题!
英文链接:Loading Scripts with jQuery via davidwalsh
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
实用技巧:使用 jQuery 异步加载 JavaScript 脚本的更多相关文章
- 谈谈异步加载JavaScript
前言 关于JavaScript脚本加载的问题,相信大家碰到很多.主要在几个点—— 1> 同步脚本和异步脚本带来的文件加载.文件依赖及执行顺序问题 2> 同步脚本和异步脚本带来的性能优化问题 ...
- 页面异步加载javascript文件
昨天听一同事说的异步加载js文件,可以提高页面加载速度.具体方法如下:(function() { var ga = document.createElement('script'); ga.type ...
- 探真无阻塞加载javascript脚本技术,我们会发现很多意想不到的秘密
下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问 ...
- 使用jQuery动态加载js脚本
动态加载Javascript是一项非常强大且有用的技术.这方面的主题在本站已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js.它们很强大,但有时候也会得不偿失.如果你使 ...
- 使用jQuery动态加载js脚本文件的方法
动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使 ...
- loadjs异步加载javascript回调
function loadjs(url,callback){ var script=document.createElement('script'); script.type=" ...
- jquery异步加载json格式的数据
1.直接使用$.getJSON()方法是加载不了与静态界面同级别的本地的json后缀的文件. 2.解决办法:将json后缀的文件改为js后缀,这样就相当于加载了一个js文件. 解决办法:用$.getS ...
- 对动态加载javascript脚本的研究
有时我们需要在javascript脚本中创建js文件,那么在javascript脚本中创建的js文件又是如何执行的呢?和我们直接在HTML页面种写一个script标签的效果是一样的吗?(关于页面scr ...
- Android中WebView如何加载JavaScript脚本
主Activity和XML布局,末尾附上效果图 package com.example.myapplication; import androidx.appcompat.app.AppCompatAc ...
随机推荐
- iBatis + SQL Server 项目开发实战小结
几年前跟随项目经理做的一个ERP小项目,自己业余时间整理的开发手册,供参考. 开发环境配置:编程环境为Microsoft Visual Studio 2010,数据库是SQL Server 2008 ...
- Geometry Surface of OpenCascade BRep
Geometry Surface of OpenCascade BRep eryar@163.com 摘要Abstract:几何曲面是参数表示的曲面 ,在边界表示中其数据存在于BRep_TFace中, ...
- ArcGIS Earth数据小析
ArcGIS Earth,一款轻量级的三维地球应用.因为工作关系下载试用了半天,正好借这个机会简单研究一下ArcGIS Earth的大概思路,特别是地形数据的组成和影像数据的加载,在这总结整理一下.下 ...
- javaccript学习2
[Javascript]javascript学习 十六 JavaScript 事件 事件是可以被 JavaScript 侦测到的行为. 事件 JavaScript 使我们有能力创建动态页面.事件是可以 ...
- Cordova webapp实战开发:(6)如何写一个iOS下获取APP版本号的插件?
上一篇我们学习了如何写一个Andorid下自动更新的插件,我想还有一部分看本系列blog的开发人员希望学习在iOS下如何做插件的吧,那么今天你就可以来看看这篇文字了. 本次练习你能学到的 学习如何获取 ...
- Pig + Ansj 统计中文文本词频
最近特别喜欢用Pig,拥有能满足大部分需求的内置函数(built-in functions),支持自定义函数(user defined functions, UDF),能load 纯文本.avro等格 ...
- MVC的控制器的激活过程,我们从MvcHandler开始讲,前面的事情以后再讲
一.从MvcHandler开始(不要觉得是代码,让你看懂才是最重要的) using Microsoft.Web.Infrastructure.DynamicValidationHelper; usin ...
- [python基础]关于中文编码和解码那点事儿
我们在用python处理中文的时候,或多或少会遇到这样一些错误 常见错误1: SyntaxError: Non-ASCII character '\xe4' in file C 常见错误2: Unic ...
- LeetCode - Minimum Depth of Binary Tree
题目: Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the ...
- Socket接收大数据的方法
byte[] buffer = new byte[BufferSize]; int bytesRead; // 读取的字节数 MemoryStream msStream = new MemoryStr ...