• document.ready和onload的区别


    转自:http://holysonll.blog.163.com/blog/static/2141390932013411112823855/

    document.ready和onload的区别——JavaScript文档加载完成事件
    页面加载完成有两种事件
    一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)
    二是onload,指示页面包含图片等文件在内的所有元素都加载完成。
     
    用jQ的人很多人都是这么开始写脚本的:
    $(function(){
    // do something
    });
    其实这个就是jq ready()的简写,他等价于:
    $(document).ready(function(){
    //do something
    })
    //或者下面这个方法,jQuer的默认参数是:“document”;
    $().ready(function(){
    //do something
    })
    这个就是jq ready()的方法就是Dom Ready,他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
    一般情况先一个页面响应加载的顺序是:域名解析-加载html-加载js和css-加载图片等其他信息。
    那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。
     
     
    以上还是本人新手时写的。。。感觉大家阅读,5000+的阅读量鄙人在此就加点内容吧,不让广大技术朋友白支持!!
    2014-8-18 -----鄙人现在已经不算新手了,在此给大家再深入说点内容吧。
     
    1.window.onload方法
     
    ⑴执行时机:
    在网页中所有元素(包括元素的所有关联文件)完全加载到浏览器后才执行,即JavaScript 此时可以访问网页中的所有元素。
    window.onload=function(){  $(window).load(function(){
    //编写代码 等价于  //编写代码
    }  });
     
    ⑵多次使用:
    JavaScript的onload事件一次只能保存对一个函数的引用,他会自动用最后面的函数覆盖前面的函数。

    function one(){

    alert("one");

    }

    function two(){

    alert("two");

    }

    window.onload=one;

    window.onload=two;

    //运行代码后只有 two

    2.$(document).ready()方法
     
    ⑴执行时机:在DOM完全就绪时就可以被调用。(这并不意味着这些元素关联的文件都已经下载完毕)
    举个例子:$(document).ready()方法明知要DOM就绪就可以操作了,不需要等待所有图片下载完毕。
     
    ⑵多次使用:

    function one(){

    alert("one");

    }

    function two(){

    alert("two");

    }

    $(document).ready(function(){

    one();

    });

    $(document).ready(function(){

    two();

    });

    //运行代码后

    //先是:one

    //后是:two

  • 相关阅读:
    0593. Valid Square (M)
    0832. Flipping an Image (E)
    1026. Maximum Difference Between Node and Ancestor (M)
    0563. Binary Tree Tilt (E)
    0445. Add Two Numbers II (M)
    1283. Find the Smallest Divisor Given a Threshold (M)
    C Primer Plus note9
    C Primer Plus note8
    C Primer Plus note7
    C Primer Plus note6
  • 原文地址:https://www.cnblogs.com/rickgao/p/5446064.html
Copyright © 2020-2023  润新知