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快的奥秘
100 0
|
7月前
|
JavaScript 前端开发 开发者
jQuery中的ready()函数:优雅地处理页面加载事件
jQuery中的ready()函数:优雅地处理页面加载事件
154 0
|
8月前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
JavaScript
jQuery学习(四)— jQuery的ready事件和原生JS的load事件的区别
jQuery学习(四)— jQuery的ready事件和原生JS的load事件的区别
|
JavaScript
jQuery学习(一)—jQuery应用步骤以及ready事件和load事件的区别
jQuery学习(一)—jQuery应用步骤以及ready事件和load事件的区别
|
JavaScript
jQuery中(function(){})()执行顺序导致的不正常显示存在的几个问题
jQuery中(function(){})()执行顺序导致的不正常显示存在的几个问题
93 0
|
JavaScript
Jquery中的$(document).ready()详解
1.$(document).ready()的作用 $(document).ready(function(){.... })这个函数的作用和window.onload差不多,不同的是 (1)onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载 (2)$(document).ready()所要执行的代码是在DOM元素被加载完成的情况下执行,所以,使用document.ready()方法的执行速度比onload()的方法要快。
200 0
|
2月前
|
中间件 Docker Python
【Azure Function】FTP上传了Python Function文件后,无法在门户页面加载函数的问题
通过FTP上传Python Function至Azure云后,出现函数列表无法加载的问题。经排查,发现是由于`requirements.txt`中的依赖包未被正确安装。解决方法为:在本地安装依赖包到`.python_packages/lib/site-packages`目录,再将该目录内容上传至云上的`wwwroot`目录,并重启应用。最终成功加载函数列表。
|
3月前
|
JavaScript
箭头函数与普通函数(function)的区别
箭头函数是ES6引入的新特性,与传统函数相比,它有更简洁的语法,且没有自己的this、arguments、super或new.target绑定,而是继承自外层作用域。箭头函数不适用于构造函数,不能使用new关键字调用。
|
3月前
|
数据可视化 开发者 索引
详解Wireshark LUA插件函数:function p_myproto.dissector(buffer, pinfo, tree)
在 Wireshark 中,LUA 插件通过 `function p_myproto.dissector(buffer, pinfo, tree)` 扩展协议解析能力,解析自定义应用层协议。参数 `buffer` 是 `PacketBuffer` 类型,表示原始数据包内容;`pinfo` 是 `ProtoInfo` 类型,包含数据包元信息(如 IP 地址、协议类型等);`tree` 是
135 1

热门文章

最新文章

相关课程

更多