window.onload 和 $(document).ready(function(){})的区别

时间:2023-03-09 04:56:27
window.onload 和  $(document).ready(function(){})的区别

这篇作为我的新的起点开始吧,发现年纪大了,记性就不好了,有些东西老是记了忘,忘了百度。在学一些新知识的时候也是这样的毛病,总是重复学习,这样效率真心差!所以决定开始认真写博客!

本来想封装一个预加载的插件的,在开始写时,才发现自己很多不足。百度上看见这个题目,发现自己不会,所以记下!

window.onload    与     jq的 $(document).ready()

window.onload 是当页面所有资源全部加载完成后(包括DOM文档树,css文件,js文件,图片资源),执行一个函数。

问题:如果图片资源较多,加载时间较长,onload后等待执行的函数需要等待较长时间,所以一些效果可能受到影响

$(document).ready() 是当DOM文档树加载完成后执行一个函数(不包含图片,css等),所以比window.onload较快执行

那我们来看看$(document).ready()是如何实现的吧

     window.onload = function(){
alert('onload');
} document.ready = function(callback){
//兼容ff,chrome
if(document.addEventListener){
document.addEventListener('DomContentLoader',function(){ document.removeEventListener('DomContentLoader',arguments.callee,false);
callback();
},false);
}
//兼容ie
else if(document.attachEvent){
document.attachEvent('onreadystatechange',function(){ if(document.readyState == 'complete'){ document.detachEvent('onreadystatechange',arguments.callee);
callback();
}
});
}
} document.ready = function(){
alert('lalala');
}     //最终你会发现会首先弹出'lalala'