前端中onload与ready的区别
Jquery的ready()与Javascrpit的load()
1 | 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(节点)加载完后就可以做相应的操作,而不用等待全部元素加载完成.比如只知道页面某处有一张图片,而不一定要等它显示出来就可以为它绑定点击方法。
https://www.cnblogs.com/wsun/p/3916487.html