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

Biegral 2018/12/4 20:17:42 1261

转自：http://developer.51cto.com/art/201210/361913.htm
2012-10-30 10:00 58分享 58分享的博客 字号：T | T
一键收藏，随时查看，分享好友！

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

AD：51CTO学院：IT精品课程在线看！

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

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

  1. $.getScript(url,callback) 



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



Parameters



URL（）获取脚本文件的URL。



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



具体实现过程是



从资源加载文本



如果字符串成功



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



如何使用呢看下面的方法



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


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



HTML代码


  1. <html> 
  2. <head> 
  3. <title> $.getScript Example</title> 
  4. <script type="text/javascript" src="../jquery.js"></script> 
  5. <script type="text/javascript"> 
  6. $(function()  
  7. {  
  8.  $('#loadButton').click(function(){  
  9.   $.getScript('new.js',function(){  
  10.    newFun('"Checking new script"');//这个函数是在new.js里面的，当点击click后运行这个函数  
  11.   });  
  12.  });  
  13. });  
  14. </script> 
  15. </head> 
  16. <body> 
  17. <button type="button" id="loadButton">Load</button> 
  18. </body> 
  19. </html> 



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



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






            

                

    

    

    本文转载:CSDN博客


         


          


         






                

                

                    

                     



                    

                    

                        
阅读排行

                        
                    

                    

                        
分类

                        
                    


                    

                        
归档