jQuery ready 和 window.onload 的区别

  1. 执行时间:window.onload 必须等到页面内包括图片的所有元素加载完毕后才能执行。
    $(element).ready() 是 DOM 结构绘制完毕后就执行,不必等到页面所有元素加载完毕。
  2. 编写方法个数不同:window.onload 不能同时编写多个,如果有多个 window.onload 方法只会执行一个。
    $(element).ready() 可以同时编写多个,并且都可以得到执行。

注:$(document).ready() 和 $(function(){}) 相同,后者是前者的简写。jQuery 中也有方法是等到页面内包括图片的所有元素加载完毕后才能执行的方法,$(window).load(function(){}),而且 jQuery 的 load 方法可以编写多个方法。

使用情况:

使用 $(window).load(function(){}) 和 window.onload() 都存在一个问题,就是它们都需要等到页面所有内容加载完毕才执行,但是如果当网速比较慢的时候,加载一个月页面往往需要较长的时间,所以我们经常会遇到页面还没有完全加载完毕而用户已经在操作页面了这种情况,这样页面表现出来的效果跟我们预期的效果就不一样了,所以这里推荐使用$(document).ready(function(){}),或简写 $(function(){}),因为他会在页面的 DOM 元素加载完毕后就执行,而不需等待图片或者其他媒体下载完毕。当然有时候我们还是需要有这种需要等到页面所有内容都加载完后再执行我们的操作。
所以该使用哪种方法往往需要根据具体需要而作不同的选择。

你可能感兴趣的:(jQuery ready 和 window.onload 的区别)