这篇作为我的新的起点开始吧,发现年纪大了,记性就不好了,有些东西老是记了忘,忘了百度。在学一些新知识的时候也是这样的毛病,总是重复学习,这样效率真心差!所以决定开始认真写博客!
本来想封装一个预加载的插件的,在开始写时,才发现自己很多不足。百度上看见这个题目,发现自己不会,所以记下!
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'