如果您要创建一个web2.0的应用程序,那么你的网页会包括大量的JavaScript文件,这些可能会拖慢您的网页。因此,动态加载JavaScript代码到您的网页是一个好主意,即只有当实用他们的时候加载它们。这种策略可以帮助你减少你的网页的加载时间。

幸运的是,jQuery提供了一个内置的实用函数,$getScript()为我们提供了这样的方法。来实现在网页动态的功能。来看看这个函数的语法:

$.getScript(url,callback) 

获取url参数所指定的脚本,使用一个GET请求到指定的服务器

Parameters

URL()获取脚本文件的URL。

callback (Function)可选函数 调用脚本文件加载后里面的函数

具体实现过程是

从资源加载文本

如果字符串成功

返回XHR实例,用来获取脚本。

如何使用呢看下面的方法

我们创建一个new.js 脚本文件

var testVar = 'New JS loaded!';
alert(testVar);
function newFun(dynParam)
{
alert('You just passed '+dynParam+ ' as parameter.');
}

HTML代码

<html>
<head>
<title> $.getScript Example</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function()
{
$('#loadButton').click(function(){
$.getScript('new.js',function(){
newFun('"Checking new script"');//这个函数是在new.js里面的,当点击click后运行这个函数
});
});
});
</script>
</head>
<body>
<button type="button" id="loadButton">Load</button>
</body>
</html>

上述代码当中我们创建一个new.js的脚本文件,在body部分当button函数触发的时候调用它,这样做的好处是减少服务器压力,是非常值得推荐的。

原文链接:http://www.cnblogs.com/58top/archive/2012/10/29/loading-javascript-dynamically-using.html

jQuery动态加载JS以减少服务器压力的更多相关文章

  1. jquery动态加载js三种方法实例

    这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\" ...

  2. (一)JQuery动态加载js的三种方法

    Jquery动态加载js的三种方法如下: 第一种: $.getscript("test.js"); 例如: <script type="text/javascrip ...

  3. jquery动态加载js/css文件方法

    先来看jquery自带的getSrcript文件 方法 代码如下 复制代码 $.getScript(url,callback) 实例 代码如下 复制代码 var testVar = 'New JS l ...

  4. 使用jQuery动态加载js脚本

    动态加载Javascript是一项非常强大且有用的技术.这方面的主题在本站已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js.它们很强大,但有时候也会得不偿失.如果你使 ...

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

    动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使 ...

  6. jquery动态加载JS【方法getScript】的改进

    http://www.cnblogs.com/cuitsl/archive/2012/11/15/2771549.html

  7. jquery动态加载 去除js

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

  8. 三种动态加载js的jquery实例代码另附去除js方法

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

  9. jquery getScript动态加载JS方法改进详解[转载]

    转载自http://www.jb51.net/article/31973.htm 有许多朋友需要使用getScript方法动态加载JS,本文将详细介绍此功能的实现方法     $.getScript( ...

随机推荐

  1. Springboot集成BeanValidation扩展二:加载jar中的资源文件

    一.需求 今天在搭建Springboot框架的时候,又遇到一个需求:在多模块系统中,有些模块想自己管理BeanValidation的资源文件(默认是启动项目claspath下的 ValidationM ...

  2. 【sublime】sublime Text 3 javaScript代码自动提示插件&安装步骤 &启动Debug模式

    最近使用sublime开发node.js,但是sublime的js代码在书写的时候并没有提示功能. 因此搜到资料,用于安装代码自动提示插件. 1.打开sublime,然后快捷键Ctrl+Shift+P ...

  3. VUE -- Mac上解决Chrome浏览器跨域问题

    最近做前端开发总是遇到一个很奇怪的现象,同一个AJAX请求,在Chrome里调试的时候就会提示跨域,但是在手机模拟器或者真机上调试的时候就不会,于是百度了一下,发现是Chrome的安全策略导致的,需要 ...

  4. 利用Yum彻底移除docker

    yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ docker-la ...

  5. js封装的一行半显示省略号。(字数自由控制)

    $(function() { //控制一行半隐藏 (function ($) { $.fn.displayPart = function (opts) { $(this).each(function ...

  6. 深入理解brew link命令

    来源:https://newsn.net/say/brew-link-php71.html brew是mac机上面程序猿非常常用的软件包安装方式,其中有两组命令是需要大家知晓的.分别是: 第一组:br ...

  7. 【D3.js】Focus + Context 折线图

    利用D3.js库实现Focus+Context的折线图.读取data.tsv文件数据 index.html <!DOCTYPE html> <meta charset="u ...

  8. #if 条件编译

    1.格式: #if constant-expression statements #elif constant-expression statements #else statements #endi ...

  9. Python爬取抖音视频

    最近在研究Python爬虫,顺便爬了一下抖音上的视频,找到了哥们喜欢的小姐姐居多,咱们给他爬下来吧. 最终爬取结果 好了废话补多说了,上代码! #https://www.iesdouyin.com/a ...

  10. HTTP请求和响应2:方法(Method)

    方法表明了client希望server对资源运行的动作.经常使用的方法包含:GET.HEAD.POST.PUT.TRACE.OPTIONS和DELETE,每一个server能够实现这些方法中的部分或者 ...