zoukankan      html  css  js  c++  java
  • javascriptdocument load 和document ready的区别

    页面加载完成有两种事件,一是ready , 表示文档结构已经加载完成(貋图片等非文字媒体文件),二是onload 指示页面包含图片等文件在内的所有元素都加载完成。
     
    1.执行时间不同:
    从字面的意思上理解,$(document).ready()就是文档准备好了。也就是浏览器已经解析完整个html文档,dom树已经建立起来了,这时就可以通过class属性或者id属性等等对dom进行操作等。而$(window).load()就是整个页面已经加载完毕。与前者的区别是dom树虽然已经建立起来了,但页面不一定加载完毕,如一些大的图片等,加载完成就需要一定的时间;但是页面加载完毕后,dom肯定也就建立起来了;但是有些文字或者图片链接等需要在文档加载完毕前,dom树建立后就进行的,这时就要用到$(document).ready()了。

    2.可以被执行的次数不同:

    $(document).ready()可以在JavaScript代码中出现多次,并且里面的函数或者代码都可以得到执行;而$(window).load()只能在JavaScript代码中出现一次,如果有多个$(window).load(),那么只有最后一个$(window).load()里面的函数或者代码才会执行,之前的$(window).load()都将被覆盖;

    3.执行的效率不同:
    如要在dom的元素节点中添加onclick属性节点,这时用$(document).ready()就要比用$(window).load()的效率高;但是在某些时候还必须得用$(window).load()才行,如之前写的app下载,如果要关闭这个下载框,则必须要在整个下载框加载完毕后,才能点击关闭图标,对app下载框执行隐藏。

    <script>
    
    $(document).ready(function(){
      $(".the_body a").attr("onclick","alert('test')");
    });
    
    $(window).load(function(){
       $(".close_btn").click(function(){
            $("#app_down").hide();
        });
    });
    </script>
     
     

    <wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">





  • 相关阅读:
    OpenSLAM
    CAD&CG GDC 2018大会论文录用名单
    hdu4328(经典dp用悬线法求最大子矩形)
    hdu3729(二分图)
    hdu 4055(经典问题)
    Codeforces Round #207 (Div. 1) B (gcd的巧妙运用)
    hdu1066(经典题)
    zoj3662(dp)
    zoj3659(经典并查集)
    hdu4565(矩阵快速幂+经典的数学处理)
  • 原文地址:https://www.cnblogs.com/zjx2011/p/8447730.html
Copyright © 2011-2022 走看看