zoukankan      html  css  js  c++  java
  • 【jquery】$(document).ready() 与window.onload的区别

      Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。

      1)执行时间 
      window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
      $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 

      2)编写个数不同 
      window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 
      $(document).ready()可以同时编写多个,并且都可以得到执行 
      3)简化写法 
      window.onload没有简化写法 
      $(document).ready(function(){})可以简写成$(function(){});

      以 浏览器装载文档为例,在页面加载完毕后,浏览器会通过 Javascript 为 DOM 元素添加事件。在常规的 Javascript 代码中,通常使用 window.onload 方法,而在 Jquery 中,使用的是 $(document).ready() 方法。 $(document).ready() 方法是事件模块中最重要一个函数,可以极大的提高 Web 应用程序的速度。

      window.onload $(document).ready()  

    执行时机

    必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行 网页中所有 DOM 结构绘制完毕后就执行,可以能 DOM 元素关联的内容并没有加载完  

    编写个数

    不能同时编写多个 
    以下代码无法正确执行: 
    window.onload = function(){ 
       alert(“text1”); 
    }; 
    window.onload = function(){ 
       alert(“text2”); 
    }; 
    结果只输出第二个 
    能同时编写多个 
    以下代码正确执行: 
    $(document).ready(function(){ 
       alert(“Hello World”); 
    }); 
    $(document).ready(function(){ 
       alert(“Hello again”); 
    }); 
    结果两次都输出  

    简化写法

    $(function(){ 
       // do something 
    }); 

      另外,需要注意一点,由于在 $(document).ready() 方法内注册的事件,只要 DOM 就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕,并且已经解析为 DOM 树了,但很有可能图片还没有加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。

      参考资料:http://www.jb51.net/article/21628.htm

  • 相关阅读:
    闲谈随笔以及对自己的心里暗示
    java利用Scanner获取键盘输入
    【积累】发送验证码按钮倒计时js
    【积累】validate验证框架的使用
    重写toString()方法来描述一个类
    【java基础】 合并两个类型相同的list
    java单例类/
    基本类型的包装类
    强转
    【java基础】面向对象的三大特征---多态
  • 原文地址:https://www.cnblogs.com/ningvsban/p/3728558.html
Copyright © 2011-2022 走看看