zoukankan      html  css  js  c++  java
  • 关于Jquery,js脚本加载执行先后顺序的一些事

        好久没用Jquery了,最近有个东西需要写一下,就想了想那些让脚本延缓执行的一些方法有什么区别呢。

        (1)当然,第一种方式就是将脚本内嵌在html中相应需要执行的地方,需要等到页面加载完成的话就放在最后。当然这已经是大家很不屑的做法,一般也就是一些测试啊什么的时候会用用或者代码就一几句话,其他很少会这么做了。作为外部文件引入的优点也就不赘述了,一般都明白。

        (2)将<Script>标签从head放到〈/body〉之前,其他html内容之后。这也很好理解,主要的html加载完之后,脚本才开始运行,当然要注意,这里的加载完仅仅指的是DOM加载完,图片之类的还不一定加载完成。

        (3)使用defer(推迟)属性。这个属性是表明脚本在执行时不会影响页面构造,也就是说脚本会在整个页面解析完成之后再运行,这其实和第二点是一样的,除了〈Script〉标签可以放在head里了。但是这个属性的兼容性有待考证,旧版本的浏览器只有IE是支持的,相对较新的浏览器倒是都支持了。

        (4)使用async(异步)属性。这个属性是html新添加的属性,从英文解释就可以看出,该属性是为了页面之间加载不出现阻塞的情况,是并行加载相关项,所以和defer执行效果相似,但是有一个不同,可能会造成脚本的严重问题,就是运行的时机。defer是有顺序的,按照原先语句的先后顺序执行,这样对有依赖关系的脚本没有影响;但是async是下载完成就执行,要是不同脚本之间有依赖关系,就有可能会造成未知的严重错误(当然也是有可能正常使用的)。

         之前说的都是关于脚本加载的先后顺序,至于执行的先后顺序,方法就更多种多样了。

        (5)在onload事件之后调用,注意这是在页面所有元素加载完毕后执行的,也就是图片,flash都要先加载完,脚本才执行;还有,onload才能执行一个,不能执行多个。

    a)写在body的onload事件里:

    <html>
          <body onload="func()">
          </body>
    </html>
    <html>
          <body onload="func1();func2();func3();">
          </body>
    </html> 

    b)写在脚本代码里

    <script type="text/javascript">
          function func(){……}
          window.onload=func;
    </script>
    <script type="text/javascript">
          function func1(){……}
          function func2(){……}
          function func3(){……}
          window.onload=function(){
          func1();
          func2();
          func3();
         }
     </script>

    c)Jquery的写法

    $(window).load(function() {
        ...
    });

    d)JS自定义函数式多次调用(我倒是从来没用过额```)

    <script type="text/javascript">
          function func1(){……}
          function func2(){……}
          function func3(){……}
          function addLoadEvent(func){
             var oldonload=window.onload;
             if(typeof window.onload!="function"){
                 window.onload=func;
              }
             else{
                 window.onload=function(){
                      oldonload();
                      func();
                   }
                 }
           }
           addLoadEvent(func1);
           addLoadEvent(func2);
           addLoadEvent(func3);
    </script>

         (6)Jquery使用$(document).ready(),这是在DOM加载完毕就执行,不是所有元素加载完成;相对于onload只能执行一个,ready可以有多个且都能执行:

                 ps:要想使用Js直接实现,还是有点小麻烦的~~    

    $(document).ready(function(){   
     ... 
    });
    //简写成如下 $(function(){ ... });  

    我所理解的就这样了,写个随笔记录一下,免得又忘了~  

    欢迎大家访问yhy的新博客:一块吧 (www.yikuai8.com)
  • 相关阅读:
    今日进度
    今日进度
    今日进度
    今日进度
    今日进度
    每周总结
    今日进度
    python设置环境变量
    Python Property属性【python风格】
    学习-robot【字符串汇总】
  • 原文地址:https://www.cnblogs.com/yhongyu/p/4194062.html
Copyright © 2011-2022 走看看