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

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

(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方法应该可以解决这个问题,不过没什么例子,以后有机会再补充。

时间: 2024-11-13 18:23:44

window.onload和$(document).ready()的区别的相关文章

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

<锋利的jQuery>上摘抄下来: window.onload $(document).ready() 执行时机 必须等待网页中所有的内容加载完毕后(包括图片)才能执行 网页中所有DOM结果绘制完毕后就执行,可能DOM元素关联的东西并没有加载完 编写个数 不能同时编写多个 以下代码无法正确执行:window.load = function() {  alert("test1"); }; window.load = function() {  alert("test

浏览器加载模式:window.onload和$(document).ready()的区别(详解)

jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: window.onload = function () {}; //JavaScript等待加载 $(document).ready(function () {}); //jQuery等待加载load和ready区别 window.onload $(document).ready() 执行时机 必须等待网页

window.onload和document.ready的区别

window.onload和document.ready虽然两个方法的运行效果都一样,但他们之间是存在着区别的: 一.从执行的时间 window.onload在dom文档结构加载完毕以后就可以执行,不必等到页面中的其他文件(例如图片等文件)都加载完毕. 而document.ready则是必须要等到dom文档结构和其他包括图片在内放入所有文件全部加载成功后才可以执行 二.编写个数,被执行的次数不同 window.onload不能通知书编写多个,就算写了多个,也只能执行一个: document.re

【前端】window.onload 和 $(document).ready() 的区别

... 在Stack Overflow上看到了这个问题,自己翻译了过来. The onload event is a standard event in the DOM, while the ready event is specific to jQuery. window.onload 是DOM中的标准事件,而$(document).ready() 是jQuery中的事件. The ready event occurs after the HTML document has been load

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

  window.onload  $(document).ready() 执行时机 等待网页中所有的资源加载完毕后(包括 图片.flash.音频.视频) DOM 树加载完毕后,不管里面的资源 是否加载完成 编写个数 只能执行一个 可以执行多个 简化写法 无 $(function(){})

window.onload 和document ready的区别

window.onload 是在dom文档树加载完和所有文件加载完之后执行一个函数 Document.ready原生种没有这个方法,jquery中有 $().ready(function),在dom文档树加载完之后执行一个函数(注意,这里面的文档树加载完不代表全部文件加载完). $(document).ready要比window.onload先执行 window.onload只能出来一次,$(document).ready可以出现多次

window.onload与$(document).ready()

在我们编写javascript代码的时候,我们开始会这样写的: window.onload = function (){ //编写代码 } 我并不知道为什么会是这样写的,看着别人这样写我也就这样写.今天我就来简单的说说:谈到onload我们要讲HTML的执行顺序.HTML的执行顺序是至上到下的,除非你特别的说明,javascript不会等到等到页面加载加载完成后才执行的. 例如:网页中有这样的一行代码 <p id="name">My name is Aaron</p&

jquery学习笔记一之window.onload与$(document).ready()区别

1.window.onload与$(document).ready()区别 执行时机:前者必须等待网页中所有的内容加载完毕后(包括图片)才能执行,后者 网页中说有的Dom结构绘制完毕后就执行,可能Dom元素关联的内容并没有加载完成. <!DOCTYPE html> <html> <head> <title>test</title> <script type="text/javascript" src="js/j

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

1 $(window).load(function() { 2 $("#btn-upload").click(function(){ //比如说: 3 uploadPhotos(); 4 }); 5 }); window.onload()和$(document).ready()区别