关于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 >
      </body>
</html>
<html>
      <body >
      </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(){
 ...
});  

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

时间: 2024-12-16 21:27:55

关于Jquery,js脚本加载执行先后顺序的一些事的相关文章

也说JS脚本加载控制

问题背景 前端采用的 iframe + html 做后台管理系统.现在js.jquery插件非常多,每次页面都是引用就类似这样: <script src="../Scripts/jquery-1.7.1.js"></script> <script src="../Scripts/uploadify/jquery.uploadify.js"></script> <script src="../Script

jQuery Mobile 脚本加载问题

刚开始使用jQuery Mobile,发现很多问题需要重新考虑,比如脚本加载问题. 在普通html中,如果a.html中有链接到b.html,b.html中有类似代码: $(document).ready(function() { alert("hello"); }); 则这段代码可以被正常执行. 而在jQuery Mobile中,这样做就行不通了,在浏览器中直接刷新b.html,则代码可以正常执行,而从a.html跳转到b.html时则不会被执行!为什么? 参见: http://ww

外部引入的js 判断js脚本加载是否完成,完成后执行 相应的动作(以引入百度地图js为例)

可以使用JQuery的 $.getScript(url,function(){});方法 $.getScript("http://api.map.baidu.com/getscript?v=1.1&ak=&services=true&t=",function(){ //获取百度地图js成功后 会执行此方法 initMap(); }); 这个方法等价于 $.ajax({ url: url, dataType: "script", success

01JQuery笔记-------------------------DOM和jquery中页面加载方法和顺序

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="jquery-1.8.3.js"></script&g

前端性能优化 css和js的加载与执行

一个网站在浏览器端是如何进行渲染的? html本身首先会被渲染成 DOM 树,实际上 html 是最先通过网址请求过来的,请求过来之后,html 本身会由一个字节流转化成一个字符流,浏览器端拿的就是字符流,然后通过词法分析之后,将相应的语法分析成相应的 token ,比如说 header token, 转化不同的 token tag ,然后通过 token 类型 append 到 dom 树. 遇到 link token tag,然后去请求 css ,请求过来之后再去对 css 进行解析,生成

JS 动态加载脚本 执行回调[transfer]

JS 动态加载脚本 执行回调 关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解怎么在js中加载其它js文件并在加载完成后执行回调函数. 我们可以动态的创建 <script> 元素,然后通过更改它的 src 属性来加载脚本,但是怎么知道这个脚本文件加载完成了呢,因为我们有些函数需要在脚本加载完成生效后才能开始执行. 经过对网络上资源的搜索,我发现

JS 动态加载脚本 执行回调

JS 动态加载脚本  执行回调 关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解怎么在js中加载其它js文件并在加载完成后执行回调函数. 我们可以动态的创建 <script> 元素,然后通过更改它的 src 属性来加载脚本,但是怎么知道这个脚本文件加载完成了呢,因为我们有些函数需要在脚本加载完成生效后才能开始执行. 经过对网络上资源的搜索,我发

【JS教程16】jquery文档加载完再执行

jquery文档加载完再执行 将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快. <script type="text/javascript"> $(document).ready(function(){ ...... }); </script> 可以简写为: <script type="text/javascript"> $

浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及其他的细节问题.而除了defer和async特性,动态脚本和Ajax脚本注入也是两种常用的创建无阻塞脚本的方法.总的来看,这两种方法都能达到脚本加载不影响页面解析和渲染的作用,但是在不同的浏览器中,这两种技术所创建的脚本的执行时机还是有一定差异,今天我们再来探讨一下通过动态脚本技术和Ajax注入的脚本在这些方