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

  • 相关阅读:
    IOS 网络请求中设置cookie
    七牛云存储 报错的问题
    理解RESTful架构
    关于APP接口设计
    WKWebView与Js实战(OC版)
    WKWebView API精讲(OC)
    iOS完整App资源收集
    WKWebView新特性及JS交互
    苹果app审核的规则总结
    Struts2实现文件的上传与动态下载功能。
  • 原文地址:https://www.cnblogs.com/ningvsban/p/3728558.html
Copyright © 2011-2022 走看看