JS中document.ready和window.onload详解

JS中document.ready和window.onload详解

一、区别
一般页面是先加载html、然后是js和css最后才是图片影音等信息。

document.ready和window.onload都是Html文档加载完成后触发的事件
但是两者是有区别的：

document.ready:当文档结构加载完成（不包含图片等非文字媒体文件）后，执行此函数；
window.onload:当页面（包含图片等文件在内的所有元素）都加载完成后执行此函数。

二、举例
举个简单的例子:
比如我们在一个Html页面中有一张1000*1000px的图片，但是我们想动态的设置它显示为100*100px。
ready函数是加载完Html结构就可以操作Dom了，多以这样图片会顺利的的显示为100*100px。
onload函数是当页面所有元素都显示出来，再执行此函数。
所以，这样图片会首先会显示1000*1000px的尺寸，然后再变为100*100px，会有明显的闪一下的效果。
这样解释 就比较形象了。

三、函数简单介绍
下面对这两个函数做一下简单的介绍

1、document.ready

JQuery中常用的写法
$(document).ready(function(){});
$().ready(function(){});//JQuery默认参数是 ‘document’
$(function(){});
以上三种写法是等效的

写个简单的用法

$(document).ready(function(){
    $(‘#userInfo’).bind(‘click’,function(){
        alert(123);
    });
});

2、window.onload

这个函数在原生的JS中用的比较多，我们现在做的项目也是用这个函数的
window.onload=function(){};
window.onload(function(){});
document.getElementById(“userInfo”).onload=function(){};
以上三种写法是等效的

写个简单的例子
window.onload=function(){
    addEvent(‘userInfo’,'click’,function(){
        document.getElementById(‘userInfo’).disabled=false;
        window.location.href=”/”;
    });
};
addEvent() 在上一篇博文中有介绍(原生js封装绑定事件和删除绑定事件   http://www.uuboku.com/116.html)

小结：单纯看举例是看不出来区别的，大家亲手试一下才好，一般选择页面加载的图片或者影音文件越大效果越明显。

JS中document.ready和window.onload详解   http://www.uuboku.com/121.html