文章共621,阅读大约需要8分钟


好久没写文章了,再来一波,首先上图:



参考链接:http://blog.csdn.net/kk5595/article/details/5713209

详见浏览器工作原理:https://segmentfault.com/a/1190000008835442


前言

页面加载完成有两种事件:

一是ready,表示文档结构(DOM结构)已经加载完成(不包含图片等非文字媒体文件),

二是onload,指示页面包含图片等文件在内的所有元素都加载完成。(可以说:ready 在onload 前加载!!!)

我的理解: 一般样式控制的,比如图片大小控制放在onload 里面加载;而:jS事件触发的方法,可以在ready 里面加载;


$(function(){

// do something

});

其实这个就是jq ready()的简写,他等价于:

 

$(document).ready(function(){

//do something

})

//或者下面这个方法,jQuer的默认参数是:“document”;

$().ready(function(){

//do something

})


body的onload事件与$(document).ready相比

加载多函数问题

<body onload="a();b();">

</body>

原生javascript中函数没有重载,所以会实现覆盖


a)body中声明的onload事件(DOM0级别)会被后面的window.onlad()(DOM0级别)覆盖


<body onload="a();b()">

</body>

<script>

window.onload = function(){alert('world');}

</script>


b)只能在body中的onload中实现多函数执行


<body onload="a();b()">

</body>

<srcipt>

function a(){alert('a');}

function b(){alert('b');}

</script>


c)多个window.load()会覆盖(如a)实例)


window.onload = function(){alert('hello');}

window.onload = function(){alert('world');}


在JQuery中你可以利用多个JQuery.Ready()方法,它们会按次序依次执行


代码和内容分离问题

body中的onload不分离而window.onload()分离以及$(document),ready()可以分离


执行先后顺序不同(最大区别)

$(document).ready():在DOM结构加载完毕之后执行

window.onload:在所有的文件加载完毕之后执行


$(document).ready():最大的区别是DOM加载完毕之后,不必再去等图片(异步)加载完毕后执行js代码


window.onload用法

<script type='text/javascript'>

function winready(){

    document.getElementByIdx_x.('load').style.display='none';

}

window.onload=winready; //或者window.onload=function(){winready();}

</scritp>

jquery用法:

<script type='text/javascript'>

    $(document).ready(function(){

        $('#load').css('display','none');

    })

</script>

$(window).load()

使用$(window).load()方法,这 个方法会等到页面所有内容加载完毕后才会触发,并且同时又没有OnLoad事件的弊端.

以下内容会在页面所有内容加载完成后按先后顺序依次执行.


<script type="text/JavaScript">

        $(window).load(function() {

            alert("hello");

        });

        $(window).load(function() {

            alert("hello again");

        });

</script>

与之对应的unload事件(会在页面关闭时候执行)


$(window).unload(function() {

            alert("good bye");

});


转自: https://segmentfault.com/a/1190000008933191

作者: 时间冒泡

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>


==========阅读原文==========







相关问题推荐