`
king_tt
  • 浏览: 2099915 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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

 
阅读更多

如果您要创建一个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函数触发的时候调用它,这样做的好处是减少服务器压力,是非常值得推荐的

分享到:
评论

相关推荐

    JavaScript基础教程第8版

    《JavaScript基础教程(第8版)》循序渐进地讲述了JavaScript及相关的CSS、DOM、Ajax、jQuery等技术。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上...

    jquery插件使用方法大全

    可以用来添加不向外部公开的方法,或者对jQuery的某些方法进行重新定义以提供新功能,或者提供更好的封装、避免名称空间冲突。当然,也可以用来开发插件,但Resig强烈建议在开发插件之前,先考虑jQuery UI widget...

    jQuery权威指南-源代码

    虽然jQuery使用简单,但它毕竟是一门新的技术,与传统的JavaScript在性能与语法上存在诸多差异,需要相应的书籍来引导开发者们迅速而有效地掌握它,并能真正付诸实践。综观现在已经出版的中文类jQuery图书,不是...

    AJAX和jQuery动态加载数据的实现方法

    简单的说,就是使用XMLHttpRequest对象和服务器端交换数据(以XML或是JSON等格式),使用JavaScript处理数据并更新页面内容。 为什么要使用AJAX? 借助AJAX,我们可以实现: 在不重载页面的情况下,向服务器发送...

    超实用的jQuery代码段

    4.1 使用addClass()函数动态添加样式类 4.2 使用removeClass()函数动态移除样式类 4.3 使用toggleClass()函数切换页面元素的样式类 4.4 为body增加class类支持 4.5 操作div的显示与隐藏 4.6 如何设定div始终...

    jquery图片延迟加载

    在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中...

    jquery电子文档chm

    jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时...

    jQuery详细教程

    当我们在教程中演示 jQuery 时,会将函数直接添加到 &lt;head&gt; 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件): 实例 &lt;script type="text/javascript" src="jquery.js"&gt; ...

    djm:jQuery 动态 JSON 管理器 (jQuery v1.9+) - 使用高度动态的客户端系统在服务器和客户端之间互传文件!

    该系统使您能够在服务器和客户端之间共享安全/公共文件,并在需要时在客户端上动态加载它们。 看下面的多语言支持示例~! #####JSON JSON 格式使您能够在服务器语言和 JavaScript 之间共享不合理的数据。 #####...

    用jQuery简化JavaScript开发分析

    下载JavaScript文件后,你就可以把它放在Web服务器中准备使用。你可以用HTML SCRIPT元素把jQuery库加载到任何Web页面中。src属性应利用文件在服务器中的真实路径。 代码如下:&lt;script type=”text/javascript” ...

    jquery.appendGrid:动态表输入JavaScript插件

    AppendGrid AppendGrid允许您逐行输入结构化数据,例如填充电子表格。 它允许您在网格中添加/删除/插入/删除行。 生成的输入/选择/文本区域控件的名称很不错,可以提交给服务器端应用程序,例如ASP.NET/PHP/JSP。 ...

    JavaScript权威指南(第6版)

    《JavaScript权威指南(第6版)》主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增...

    jquery-1.4.2库文件

    Google提供了jQuery库,通过使用Google提供的jQuery库,Google的服务器和线路品质那自然是不在话下的。即提高了下载速度又减少了自己服务器的并发连接数。 用起来也很简单,直接在网页里引用Google服务器上的相关js...

    jquery-1.1.3 效率提高800%

    // the options for this ajax request }cache(true) 数据类型: Boolean jQuery 1.2中新添加的参数, 如果设为false,则会强制浏览器不缓存请求的页面。 complete 数据类型: Function 当请求完成时...

    JavaScript权威指南(第6版)中文文字版

    本书新增章节描述了jQuery和服务器端JavaScript。 本书适合那些希望学习WEB编程语言的初、中级程序员和希望精通JavaScript的程序员阅读。 作者简介 作者:(美国)弗兰纳根(David Flanagan) 译者:淘宝前端团队 弗...

    JavaScript权威指南(第6版)(中文版)

    《JavaScript权威指南(第6版)》主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增...

    jQuery基础教程(第四版)

    同时,还会介绍如何以不唐突的方式添加事件(甚至在页面加载完成之前)。此外,这一章还将深入更高级的主题,例如事件冒泡、委托和命名空间。 第4章介绍通过jQuery实现动画的技术,我们将学会隐藏、显示和移动页面...

    JavaScript & jQuery完美判断图片是否加载完毕

    众所周知,常见瀑布流当鼠标滚动到浏览器底部的时候,就会发起一个ajax的请求。在服务端生成item列表后,通过 js append到相应的div...有的同学说了我使用jquery的ready不就好了。如下: $(document).ready(functio

Global site tag (gtag.js) - Google Analytics