window.onload和jquery $(document).ready(function(){ }) 比较(转)

简介:

window.onload是所有加载完后执行
$(document).ready(function(){ }) 是DOM结构加载完执行

 

最早接触的时候也说$(document).ready(function(){   })这个函数是用来取代页面中的window.onload

但是慢慢发现好像不是这样回事,是在做一个页面载入效果时发现的!

window.onload写法:

function windowready(){document.getElementById("loading").style.display="none";}

window.onload=winready;

window.onload的写法windowready会在页面完全加载完毕后才开始执行

jquery写法:

$(document).ready(function(){ 
"#loading").css("display","none");
})

jquery的写法在页面没有完全加载完毕的时候就开始执行

原因解释:

$(document).ready()是在DOM结构载入完后执行的,而window.onload是得在所有文件都加载完后执行的,注意区别,一个是DOM加载完,一个是所有文件加载完

所谓DOM加载完,就是指DOM模型加载完,也就是指代码加载完

两者最大的区别,就是DOM加载完之后,不必再去等相应的图片文字视频等等内容加载完就可以执行JS代码了

 

 

转自:http://www.52cfml.com/post/93.html



本文转自武沛齐博客园博客,原文链接:http://www.cnblogs.com/wupeiqi/archive/2012/11/14/2770652.html,如需转载请自行联系原作者

目录
相关文章
|
JavaScript 测试技术
探索jQuery的ready方法比原生js的window.onload快的奥秘
探索jQuery的ready方法比原生js的window.onload快的奥秘
|
5月前
|
JavaScript 前端开发 开发者
jQuery中的ready()函数:优雅地处理页面加载事件
jQuery中的ready()函数:优雅地处理页面加载事件
116 0
|
6月前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
11月前
|
JavaScript
jQuery学习(四)— jQuery的ready事件和原生JS的load事件的区别
jQuery学习(四)— jQuery的ready事件和原生JS的load事件的区别
|
11月前
|
JavaScript
jQuery学习(一)—jQuery应用步骤以及ready事件和load事件的区别
jQuery学习(一)—jQuery应用步骤以及ready事件和load事件的区别
|
JavaScript
jQuery中(function(){})()执行顺序导致的不正常显示存在的几个问题
jQuery中(function(){})()执行顺序导致的不正常显示存在的几个问题
76 0
|
JavaScript
Jquery中的$(document).ready()详解
1.$(document).ready()的作用 $(document).ready(function(){.... })这个函数的作用和window.onload差不多,不同的是 (1)onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载 (2)$(document).ready()所要执行的代码是在DOM元素被加载完成的情况下执行,所以,使用document.ready()方法的执行速度比onload()的方法要快。
186 0
|
JavaScript 程序员 前端开发
解决JQuery中的ready函数冲突
jQuery确实是一个提高前端开发效率的好框架(虽然很多大牛们都说它效率不咋地),但是用好它有时候并不容易,也许你也遇到过以下情况:   一个aspx页面通常可以包含其它ascx控件,如果在多人协同开发的情况下:程序员小张在控件A.
944 0
|
6月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
1月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
62 2

热门文章

最新文章

相关课程

更多