利用jQuery 动态加载 javascript

为了提高网页程序的性能,在很多情况下javascript 是按需加载,而不是全部写在 <head>里面。利用jQuery可以很方便的实现按需加载js.

程序代码 程序代码

$("#load").click(function(){
    $.getScript('helloworld.js', function() {
          $("#content").html('js 加载成功!');
    });
});


当id为“load" 的按钮被点击之后,将会动态加载 helloword.js , 然后就可以执行里面的方法。

程序代码 程序代码

<html>
<head>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

</head>
<body>
  <h1>利用 jQuery 动态加载 js</h1>

<div id="content"></div>
<br/>

<button id="load">Load JavaScript</button>
<button id="sayHello">Say Hello</button>

<script type="text/javascript">

$("#load").click(function(){
  $.getScript('js-example/helloworld.js', function() {
     $("#content").html('
          Javascript is loaded successful! sayHello() function is loaded!
     ');
  });
});

$("#sayHello").click(function(){
  sayHello();
});

</script>
</body>
</html>


其中  helloworld.js 的代码如下:
程序代码 程序代码

function sayHello(){
    alert("Hello ~我是动态加载的!");
}



除非申明,文章均为一号门原创,转载请注明本文地址,谢谢!
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: jquery
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.