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
相关推荐
- innerText和innerHTML区别以及用法
- Posted on 06月11日
- Query树插件zTree用法案例详解
- Posted on 06月16日
- linux查看cpu个数、核心数、进程数、内存大小、硬盘大小、网卡信息等信息
- Posted on 05月29日
- linux网卡是否连接网线、判断网络问题
- Posted on 07月09日