动态载入js提高网页打开速度的方法

一般来说如果一次性的载入所有需要的JavaScript代码，就会造成初始网页打开速度变慢，但是很多载入的代码又并不需要使用，这种无谓的性能浪费应该予以避免。如果要动态载入JavaScript代码,可以利用DOM模型在HTML文档中添加<script>结点，并将此结点的src属性（即 外联 Javascript文件）设置为需要动态载入的JavaScript代码。

下面就是完成这样功能的一个示例：

(1)、新建JsLoaderTest.html文件

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>按需载入JavaScript代码的例子</title>
<script type="text/javascript">
  function JsLoader(){
  this.load=function(url){
      //获取所有的<script>标记
      var ss=document.getElementsByTagName("script");
      //判断指定的文件是否已经包含，如果已包含则触发onsuccess事件并返回
      for (i=0;i<ss.length;i++){
        if (ss[i].src && ss[i].src.indexOf(url)!=-1){
          this.onsuccess();
          return;
        }
      }
      //创建script结点,并将其属性设为外联JavaScript文件
      s=document.createElement("script");
      s.type="text/javascript";
      s.src=url;
      //获取head结点，并将<script>插入到其中
      var head=document.getElementsByTagName("head")[0];
      head.appendChild(s);
      //获取自身的引用
      var self=this;
      //对于IE浏览器，使用readystatechange事件判断是否载入成功
      //对于其他浏览器，使用onload事件判断载入是否成功
      //s.onload=s.onreadystatechange=function(){
      s.onload=s.onreadystatechange=function(){
        //在此函数中this指针指的是s结点对象，而不是JsLoader实例,
        //所以必须用self来调用onsuccess事件，下同。
        if (this.readyState && this.readyState=="loading") return;
        self.onsuccess();
      }
      s.onerror=function(){
        head.removeChild(s);
        self.onfailure();
      }
    };
    //定义载入成功事件
    this.onsuccess=function(){};
    //定义失败事件
    this.onfailure=function(){};
  }
  function btnClick(){
      //创建对象
    var jsLoader=new JsLoader();
    //定义载入成功处理程序
    jsLoader.onsuccess=function(){
       sayHello();
    }
    //定义载入失败处理程序
    jsLoader.onfailure=function(){
       alert("文件载入失败！");
    }
    //开始载入
    jsLoader.load("hello.js");
  }
</script>
</head>
<body>
<label>
<input type="submit" name="Submit" onClick="javascript:btnClick()" value="载入JavaScript文件">
</label>
</body>
</html>

(2)、新建hello.js文件,包含如下代码：

// JavaScript Document
function sayHello(){
  alert("Hello World!成功载入JavaScript文件");
}
// JavaScript Document
function sayHello(){
  alert("Hello World!成功载入JavaScript文件");
}
赞 (0)

相关推荐

  • 使用JQuery快速实现Tab的AJAX动态载入(实例讲解)

    下面我就简单讲一下实现过程: 1.找到链接源,我这里是一串的Li下的链接 2.处理样式 3.当鼠标移过时载入链接源的网站到指定容器,并切换样式让点击事件返回false,这里不会应该点击到链接源网页 5.Over了. 脚本: 复制代码 代码如下: {    //homeNews          var tid = "#homeNews";//removeTabBold          var lvTabs = $(tid);          if(lvTabs != null)  

  • JS实现文件动态顺序载入的方法

    本文实例讲述了JS实现文件动态顺序载入的方法.分享给大家供大家参考.具体分析如下: 用script标签实现JS代码的动态载入. 源于JavaScript语言中函数.变量等定义可重复声明(导致覆盖)的特性,载入是按顺序的. 实现基于Mootools框架,兼容IE.Firefox.Chrome. 用法如下: <script language="javascript"> window.addEvent('domready', function() { // 载入器声明,成员函数

  • jQuery实现列表内容的动态载入特效

    采用Jquery实现的列表数据动态更新效果,更新的数据可以是ajax请求的数据. CSS: .main { width: 100%; margin-top: 100px; text-align: center; font-size: 12.5px; } th, td { border: 1px solid #ccc; line-height: 40px; padding-left: 5px; } .item:hover { background-color: #efefef; } .item:n

  • 动态载入js提高网页打开速度的方法

    一般来说如果一次性的载入所有需要的JavaScript代码,就会造成初始网页打开速度变慢,但是很多载入的代码又并不需要使用,这种无谓的性能浪费应该予以避免.如果要动态载入JavaScript代码,可以利用DOM模型在HTML文档中添加<script>结点,并将此结点的src属性(即 外联 Javascript文件)设置为需要动态载入的JavaScript代码. 下面就是完成这样功能的一个示例: (1).新建JsLoaderTest.html文件 <html xmlns="htt

  • 用innerhtml提高页面打开速度的方法

    查看源代码,可以发现,页首的登陆代码位置,只有一行 复制代码 代码如下: <div id="headtop"></div> 而flash幻灯的位置,也只有一行 复制代码 代码如下: <div id="index_slide"></div> 对于这种需要耗时的代码,最好是放在页面最后面加载,然后用innerhtml的方法加载到对应位置,达到加快页面打开速度的目的. 复制代码 代码如下: $("#headtop&

  • js实现网页图片延时加载 提升网页打开速度

    js实现网页图片延时加载 提升网页打开速度

    提升网页加载速度的方法有很多种,用 jquery.lazyload.js 实现图片异步延迟加载,对于页面包含图片较多的网站来说,会是个不错的提升网页打开速度的方法.代码君网站栏目页列表左侧,在PC端预览时能看到一个文章略缩图展示模块,一定程度上会延长网页加载时间.本文采用图片异步延迟加载的方法,来提升本站页面加载速度. 图片异步加载,就是不必一次性把页面的所有图片都加载显示出来,等用户滑动滚动条到某个位置时才会加载显示相应位置的图片,这样能很好地提升网页加载速度,进一步提升用户体验. 有很多技术

  • 针对网页制作者的网页打开速度慢的解决方法集合第1/2页

    互联网带宽越来越宽,似乎让网页的加载速度得到了质的飞跃.其实不然,因为随着带宽的提高,网页上的对象也越来越多,因此加快网页打开速度还是一个重要的课题.加快网页的打开速度,有三个路径,一是提高网络带宽,二是用户在本机做优化,三是网站设计者对网页做一定的优化.这篇文章站在一个网站设计者的角度,分享一些优化网页加载速度的小技巧. 一.优化图片 几乎没有哪个网页上是没有图片的.如果你经历过56K猫的年代,你一定不会很喜欢有大量图片的网站.因为加载那样一个网页会花费大量的时间. 即使在现在,网络带宽有了很

  • js图片实时加载提供网页打开速度

    浏览大型网站,特别是图片比较多的图片,如大型的电商网站,你会发现处了第一屏外,往下滚动的时候图片才加载出来,没必要一开始加载就要把全部图片加载出来,这样子打开网面的速度得到了很好提高.以下是笔者目前所想到的思路,如果有更好的思路,望不吝赐教. 其实实时加载图片思路很简单,页面一开始加载的时候把不需要一开始就加载的图片(如第二屏以下的图片,反正是要往下滚动才能看到的,不如把它们设置成往下滚动的时候再实时加载)路径保持到一个自定义的属性里,如:<img class="aimg" sr

  • 启用IIS6的GZIP功能，提高网站打开速度，减少带宽占用

    IIS6默认情况下没有开启GZIP功能,需要我们手动配置,但他又没提供图形化配置功能,所以呀,像我这样的技术人才,都没考虑过使用他,昨天突然看到这个想到,也许对我有用,但从网上找了找,都是一堆手工操作方法,非常麻烦呀,不过以前研究过IIS的配置文件:C:\WINDOWS\system32\inetsrv\MetaBase.xml,所以呀,我知道只要是IIS的功能就可以通过修改这个文件来完成,所以呢,就对这个文件下手吧,根据网上提供的修改的地方,在网上搜索了一圈,找到一个类似ClickOnce 的

  • Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)

    Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)

    Nginx开启Gzip压缩功能, 可以使网站的css.js .xml.html 文件在传输时进行压缩,提高访问速度, 进而优化Nginx性能!  Web网站上的图片,视频等其它多媒体文件以及大文件,因为压缩效果不好,所以对于图片没有必要支压缩,如果想要优化,可以图片的生命周期设置长一点,让客户端来缓存. 开启Gzip功能后,Nginx服务器会根据配置的策略对发送的内容, 如css.js.xml.html等静态资源进行压缩, 使得这些内容大小减少,在用户接收到返回内容之前对其进行处理,以压缩后的数

  • asp页面提高的访问速度的方法详解

    技巧之一:提高使用Request集合的效率 访问一个ASP集合来提取一个值是费时的.占用计算资源的过程.因为这个操作包含了一系列对相关集合的搜索,这比访问一个局部变量要慢得多.因此,如果打算在页面中多次使用Request集合中的一个值,应该考虑将其存贮为一个局部变量.例如将代码写成下面的形式以加快脚本引擎处理速度: 复制代码 代码如下: strTitle=Request.Form("Title")strFirstName=Request.Form("FirstName&quo

  • PHP版网站缓存加快打开速度的方法分享

    PHP版网站缓存加快打开速度的方法分享

    说明: 1,在服务器缓存了压缩过的文件,再次访问减少再压缩时间,降低CPU占用率. 2,通过设置客户端文件缓存时间,降低再次请求次数,可降低85%以上. 3,图片因为已经是压缩格式,只是设置客户端缓存时间,不做压缩处理. 使用方法: 1,服务器必须支持gzip,Rewrite功能. 2,在.htacess文件的"RewriteBase /"下面一行添加下面的代码,见图 RewriteRule (.*.css$|.*.js$|.*.jpg$|.*.gif$|.*.png$) gzip.p

  • 利用JS延迟加载百度分享代码,提高网页速度

    发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固定的网页位置就完事了,这是非常致命的方式.因为,我经常打开一个网页的时候,发现在网页加载到分享代码的时候,有时候花上几秒的时候来请求百度的服务器,最后展示分享按钮. 其实,像这样对网页来说不是非常重要的功能,我们大可以用JS来延迟加载,从而提高网页主要内容的快速加载显示.这里分享下我的放置方式.一.copy百度分享代码,如下: 复制代码 代码如下: <!-- Baidu Button BEGIN --><div id=&quo

随机推荐