jQuery动态加载JS以减少服务器压力

如果您要创建一个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> 

相关推荐