【Python全栈-JavaScript】JavaScript的window.onload()与jQuery 的ready()的区别

JavaScript的window.onload()与jQuery 的ready()的区别

做web开发时常用Jquery中$(document).ready()和JavaScript中的window.onload方法，两者都是要在页面加载完成以后加载的方法，但是这两者还是有很大区别的。最近遇到了这样的问题，查询了多篇文章，做一下总结。

简单来说，要以用以下张表来表示 ：jQuery的ready()与Javascrpit的load()

	window.onload()	$(document).ready()
加载时机	必须等待网页全部加载完毕（包括图片等），然后再执行JS代码	只需要等待网页中的DOM结构加载完毕，就能执行JS代码
执行次数	只能执行一次，如果第二次，那么第一次的执行会被覆盖	可以执行多次，第N次都不会被上一次覆盖
举例	以下代码无法正确执行：   window.onload = function() { alert(“text1”);}; window.onload = function() { alert(“text2”);};  结果只输出第二个	以下代码正确执行： $(document).ready(function(){alert(“Hello”)}); $(document).ready(function(){alert(“Hello”)}); 结果两次都输出
简写方案	无	$(function () {})

一般情况下window的load()都是用来设置body标签的onload事件.但onload事件是要在页面的元素全部加载完了才触发的,这也包括页面上的图片，以及大的表格数据。如果页面上图片较多或图片太大,加载需要较多时间，就会导致页面无响应，或者用户做了其它操作了。

而Jeuery中的ready()则是在页面的dom(节点)加载完后就可以做相应的操作,而不用等待全部元素加载完成.比如只知道页面某处有一张图片，而不一定要等它显示出来就可以为它绑定点击方法。

load()一般不建议使用，这里主要讲一下( $(selector).ready())。

原理:
在jquery脚本加载的时候,会设置一个isReady的标记,监听DOMContentLoaded事件(这个不是什么浏览器都有的,不同浏览器,jquery运作方式不一样).当然遇到调用ready函数的时候,如果isReady未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行.

参考：https://www.cnblogs.com/wsun/p/3916487.html