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

  • 相关阅读:
    搭建DG(data guard),及搭建过程中遇到的一些小问题 高伟
    介绍linux下vi命令的使用
    linux gcc编译器使用
    Linux进程编程介绍
    事件与接口实例讲解 C#
    Linux 2.6内核的编译步骤及模块的动态加载
    C# 各种定时器比较 zz
    linux下增加系统调用
    VirtualBox共享文件夹
    C++程序的单元测试(转贴)
  • 原文地址:https://www.cnblogs.com/ningvsban/p/3728558.html
Copyright © 2011-2022 走看看