$(document).ready()是DOM结构绘制完毕后就执行

时间:2021-11-06 07:51:53

首先观点上分清楚这二者:其实从名称上就能很好的区分

(1)window东西javascript的BOM东西(暗示浏览器窗口,用口语说就是你当前访谒的这个网页),所以window.onload暗示的就是当前浏览器窗口(包孕当前html网页上的所有资源:dom树、图片等)加载完成后,接下来才会执行里面写的js代码;

(2)document东西是javascript的DOM东西(暗示文档东西模型,用口语说就是你当前访谒的这个网页的整个dom树布局),所以$(document).ready()暗示的就是当前html网页上的dom树加载完成后,接下来才会执行里面的js代码。

<script type="text/javascript"> //javascript源生js代码的入口函数的写法 window.onload = function(){ alert(1); } //jquery的js代码入口函数的写法($标记其实暗示的就是jQuery这个东西,可以理解为给jQuery东西起了个别号, //像我们挪用的$.post()、$.ajax()…等要领其实都是jQuery东西的要领) $(document).ready(function(){ alert(2); }) </script>

所以上面两个哪个先执行,也就不言而喻了。虽然alert(2)是写在alert(1)后面的,但是dom树加载完成必定是先于整个网页加载完成的。

下面再列下面试时谈这两个的区别时的几个小细节

(1)执行时机差别

  window.onload必需等到页面内包孕图片的所有元素加载完毕后才华执行。
  $(document).ready()是DOM布局绘制完毕后就执行,不必等到加载完毕。 

(2)可以写的个数差别

  window.onload不能同时编写多个,如果有多个window.onload要领,只会执行一个
       $(document).ready()可以同时编写多个,并且都可以得到执行 

(3)简化写法

  window.onload没有简化写法
       $(document).ready(function(){})可以简写成$(function(){});

最后再说下可能会遇到的一种情况,当我们在页面中使用了$(document).ready(function(){}),当页面dom树加载完成后,function中的代码就会被执行,一般来说大部分情况都是没有问题的。

但是若有些时候,必需要等所有的元素都加载完毕,,才可以执行一些要领的时候,好比说,部分图片或者其他什么还没有加载好,这个时候,点击某些按钮,会导致页面呈现某些意料之外的

情况,load要领应该可以解决这个问题,不过没什么例子,以后有机会再增补。

window.onload和$(document).ready()的区别