#javascript# window.onload 和 $(document).ready()

fantix 发布于2019-08-26 13:56 / 2462人阅读

摘要：当浏览器中所有的资源内容结构文本内容图片都加载完成，触发事件。它是基于事件绑定完成的。中提供的方法，是基于这个事件完成这个操作的中的事件绑定都是基于事件绑定完成的但是在下使用也是不支持的，在中使用的是事件处理的。

window.onload

当浏览器中所有的资源内容（DOM结构、文本内容、图片...）都加载完成，触发load事件。

它是基于DOM0事件绑定完成的。所以在同一个页面中只能给它绑定一个方法（绑定多个将以最后一个绑定的为主）

如果想在一个页面中使用多次，我们应该是基于DOM2事件绑定。

function fn1(){
//第一件事
}
function fn2(){
//第二件事
}
window.addEventListener("load",fn1,false);
window.addEventListener("load",fn2,false);

$(document).ready()

$(function(){}) 或者 $(document).ready(function(){})

当文档中的DOM结构加载完成就会被触发执行，而且在同一个页面中可以使用多次。

JQ中提供的方法，JQ是基于DOMContentLoaded这个事件完成这个操作的

JQ中的事件绑定都是基于DOM2事件绑定完成的

但是DOMContentLoaded在IE6~8下使用
attachEvent也是不支持的，JQ在IE6~8中使用的是readystatechange事件处理的。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109853.html

jQuery的ready函数源码解读

摘要：学习有许多途径，我们今天从的函数开始。本例中的代码都来自于脚本库。我们在通过函数注册事件处理之前，完成了页面检测代码的注册。当页面完全加载之后，我们注册的函数就被调用了。八参考的函数是如何工作的函数实现原理如果你对$(document).ready()的理解也仅限于在DOM Tree绘制完毕后触发，那么，你也应该好好研究下ready的工作原理，因为，TST的面试官问过我这个问题。。。...

soasme 2019-08-19 18:34 评论0 收藏0
项目过程中的小学习

摘要：浅灰色呈现该提示会在输入字段为空时显示，并会在字段获得焦点时消失。在常规的代码中，通常使用方法，而在中，使用的是方法。方法是事件模块中最重要一个函数，可以极大的提高应用程序的速度。 1.将多个同类元素分行，每一行有两个或者多个元素，可用li标签实现此身高 ...

wua_wua2012 2019-08-02 16:31 评论0 收藏0
项目过程中的小学习

摘要：浅灰色呈现该提示会在输入字段为空时显示，并会在字段获得焦点时消失。在常规的代码中，通常使用方法，而在中，使用的是方法。方法是事件模块中最重要一个函数，可以极大的提高应用程序的速度。 1.将多个同类元素分行，每一行有两个或者多个元素，可用li标签实现此身高 ...

william 2019-08-23 11:31 评论0 收藏0
onload事件与ready的区别

摘要：好久没写文章了，再来一波，首先上图参考链接与的区别详见浏览器工作原理浏览器工作原理前言页面加载完成有两种事件一是，表示文档结构结构已经加载完成不包含图片等非文字媒体文件，二是，指示页面包含图片等文件在内的所有元素都加载完成。好久没写文章了，再来一波，首先上图： showImg(https://segmentfault.com/img/bVLD32?w=1105&h=244); 参考...

mating 2019-08-20 15:33 评论0 收藏0
document.ready和window.onload的区别

摘要：和的区别文档加载完成事件页面加载完成有两种事件一是，表示文档结构已经加载完成不包含图片等非文字媒体文件二是，指示页面包含图片等文件在内的所有元素都加载完成。即当所有链接被鼠标单击的时候，都执行也就是说页面加载时绑定，真正该触发时触发。 document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件：一是ready，表示文档结构已经加载完...

B0B0 2019-08-23 14:14 评论0 收藏0