使用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 });
});

在加载脚本的时候需要特别注意缓存问题！

赞 (0)

相关推荐

  • jquery zTree异步加载简单实例分享

    首先提供Ztree官方网站http://www.ztree.me. Ztree是一个使用jQuery实现的JSP页面的各种功能树,本文介绍一个异步获取数据到下拉树的实现方式. 当前版本Ztree 3.5.01 simple.html 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>simple.html</title> <meta http-equiv="keywords"

  • struts2+jquery+json实现异步加载数据(自写)

    复制代码 代码如下: //初始加载页面时 $(document).ready(function(){ //为获取单个值的按钮注册鼠标单击事件 $("#getMessage").click(function(){ $.getJSON("ceshi",function(data){ //通过.操作符可以从data.message中获得Action中message的值 $("#message1").html("<font color='

  • JQuery异步加载PartialView的方法

    本文实例讲述了JQuery异步加载PartialView的方法.分享给大家供大家参考,具体如下: 需求:页面上有dropdown之类的控件,当选择里面不同值的时候,下面关联的内容跟着改变. 思路:把与 dropdown关联的会改变的内容放到PartialView(ascx)里,用JQuery绑定dropdown的change事件,当选择值改变时,用JQuery ajax请求与PartialView相关的Action,得到数据后讲取到的内容覆盖原来的内容. 实现: Model 类: public

  • JQuery异步加载无限下拉框级联功能实现示例

    复制代码 代码如下: <pre code_snippet_id="193059" snippet_file_name="blog_20140218_1_1038704" name="code" class="javascript">/* JQuery异步加载无限极下拉框级联功能 zjy */ (function ($) { $.ajaxSetup({ async: false }); var url = "

  • MVC Ajax Helper或Jquery异步加载部分视图

    废话不多说了,直接给大家贴代码了. Model: namespace MvcApplication1.Models { public class Team { public string Preletter { get; set; } public string Name { get; set; } } } 通过jQuery异步加载部分视图 Home/Index.cshtml视图中: @{ ViewBag.Title = "Index"; Layout = "~/Views/

  • 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

    如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

    ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 效果演示      源码下载 本文将结合实例讲解如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,我们以中国地图为例,展示去年(2015年)我国各省份GDP数据.通过异步请求php,读取mysql中的数据,然后展示在地图上,因此本文除了你掌握前端知识外,还需要你了解PHP以及MySQL方

  • jquery zTree异步加载、模糊搜索简单实例分享

    本文实例为大家讲解了jquery zTree树插件的基本使用方法,具体内容如下 一.节点模糊搜索功能:搜索成功后,自动高亮显示并定位.展开搜索到的节点. 二.节点异步加载:1.点击展开时加载数据:2.选中节点时加载数据. 前台代码如下: <script type="text/javascript"> //ztree设置 var setting = { view: { fontCss: getFontCss }, check: { enable: true }, data:

  • jQuery异步加载数据并添加事件示例

    几个月前在一个项目中涉及到树形栏,然后看了很多插件,觉得有点麻烦,于是自己写了一个,写着写着就出问题了. 当时项目是通过树形栏进行权限控制的,管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作,可是用$(".XX").click();方法是不行的. 1.之前用的是jq1.4.3 ,jq1.7一下都可以使用live()方法,来实现该功能 $('#div').live('click',function(){ //do stuff }); 但是live方法也有不支持的事件,例如:to

  • 自写的jQuery异步加载数据添加事件

    几个月前在一个项目中涉及到树形栏,然后看了很多插件,觉得有点麻烦,于是自己写了一个,写着写着就出问题了. 当时项目是通过树形栏进行权限控制的,管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作,可是用$(".XX").click();方法是不行的. 1.之前用的是jq1.4.3 ,jq1.7一下都可以使用live()方法,来实现该功能 复制代码 代码如下: $('#div').live('click',function(){ //do stuff }); 但是live方法也有不

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

    JavaScript 加载器在 Web 开发中是非常强大和有用的工具.目前流行的几个加载器,像 curljs.LABjs 和 RequireJS 使用都很广泛.他们功能强大的,但有些情况下可以有更简单的方案. 如果你正在使用 jQuery,有一个内置的方法可以用来加载脚本.如果你想延迟加载插件或任何其他类型的脚本,都可以使用这种方法.下面给大家介绍如何使用它. 实现方法 jQuery 内置有 getScript 方法来加载一个脚本,处理返回的结果可以有几种方法来实现.最基本的用法 jQuery.

  • 快速掌握WordPress中加载JavaScript脚本的方法

    在 WordPress 中加载脚本(为 CSS 和 JS,下同)文件,大多数人的做法是直接在 header.php 文件中添加 link 标签,或者把 link 标签通过 wp_head 钩子直接添加到 head 标签里,这种做法是不符合官方规范的. 标准的脚本加载方式应该是使用 WordPress 官方提供的函数(后边会说),统一标准有几个好处,首先就是更加安全和利于管理,其次是更加的方便快捷,而且不仅主题能挂载脚本,插件也可以,并且还能管理脚本,并且调整挂载顺序和位置和其它内容. 在哪个钩子

  • 使用jQuery动态加载js脚本文件的方法

    它们很强大,但有时候也会得不偿失.如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个js文件.当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法.下面就介绍一下如何使用它! 一.jQuery getScript()方法加载JavaScript jQuery内置了一个方法可以加载单一的js文件:当加载完成后你可以在回调函数里执行后续操作.最基本的使用jQuery.getScript的方法是这样: 复制代码 代码如下: jQuery.getScript("/path/t

  • 使用jquery动态加载javascript以减少服务器压力

    幸运的是,jQuery提供了一个内置的实用函数,$getScript()为我们提供了这样的方法.来实现在网页动态的功能.来看看这个函数的语法: $.getScript(url,callback) 获取url参数所指定的脚本,使用一个GET请求到指定的服务器 Parameters URL()获取脚本文件的URL. callback (Function)可选函数 调用脚本文件加载后里面的函数 具体实现过程是 从资源加载文本 |如果字符串成功 返回XHR实例,用来获取脚本. 如何使用呢看下面的方法 我

  • JQuery ztree 异步加载实例讲解

    JQuery ztree 异步加载实例讲解

    本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 准备工作: 1下载 JQuery ZTree 复制其中的JS和CSS即可,其实没必要引那么多,用什么引什么就可以. 2 需要fastJSON,用来转换JSON对象 我下载JAR包后,引入到Eclipse中总是报找不到class错误. 解决办法:把jar包放在WEB-INF/lib下即可. 代码实例: index.jsp <%@ page language="jav

随机推荐