为什么window.onload比$(document).ready()先执行?

karine
  • 30

不是说window.onload会等到页面所有资料都加载完毕后才执行,而$(document).ready()只要DOM树加载完毕就可以执行吗?那按理来说,$(document).ready()里的函数会比window.onload先执行才对,为什么测试结果根据浏览器不同而表现不同?
下面是代码和实验结果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./scripts/jquery-3.2.1.js" type="text/javascript"></script>
    <script src="./scripts/common.js" type="text/javascript"></script>
</head>
<body>
 <div class="box">
        <ul class="menu">
            <li class="level1">
                <a href="#">格林芬多</a>
                <ul class="level2">
                    <li><a href="#">哈利波特</a></li>
                    <li><a href="#">罗恩</a></li>
                    <li><a href="#">赫敏</a></li>
                </ul>
            </li>
            <li class="level1">
                <a href="#">斯莱哲林</a>
                <ul class="level2">
                    <li><a href="#">哈利波特</a></li>
                    <li><a href="#">罗恩</a></li>
                </ul>
            </li>
            <li class="level1">
                <a href="#">赫夫帕夫</a>
                <ul class="level2">
                    <li><a href="#">纽特</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <img src="xx.jpg"/>
</body>
<script>
    $(document).ready(function(){
    alert("hello,jquery1!");
    });
    window.onload = function(){
        alert("hello,js1!");
    };
</script>
</html>

[实验结果]:

Firefox:
     jquery1(图片出现)->js1
Safari:
     jquery1->js1->图片出现
Opera:
     js1->jquery1(图片出现)
IE: 
     js1->jquery1(图片出现)
Chrome:
     js1->jquery1(图片出现)
回复
阅读 4.1k
9 个回答
✓ 已被采纳

顺着问题,我自己尝试了一下。
应该是jquery3更新的问题。

恰巧也找了一个issues 讨论的这个。
机票:https://github.com/jquery/jqu...

window.onload在dom加载完成前触发,ready()会在加载完成后触发

window.onload在dom加载完成前触发,ready()会在加载完成后触发

DOM文档加载的步骤为:

  1. 解析HTML结构。
  2. 加载外部脚本和样式表文件。
  3. 解析并执行脚本代码。
  4. DOM树构建完成。//DOMContentLoaded
  5. 加载图片等外部文件。
  6. 页面加载完毕。//load

$(document).ready() 内部实现:

document.ready = function (callback) {
            ///兼容FF,Google
            if (document.addEventListener) {
                document.addEventListener('DOMContentLoaded', function () {
                    document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                    callback();
                }, false)
            }
             //兼容IE
            else if (document.attachEvent) {
                document.attachEvent('onreadystatechange', function () {
                      if (document.readyState == "complete") {
                                document.detachEvent("onreadystatechange", arguments.callee);
                                callback();
                       }
                })
            }
            else if (document.lastChild == document.body) {
                callback();
            }
        }

所以 $(document).ready() 会先执行

链接描述

1.执行时间

    window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
    $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 

2.编写个数不同

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

3.简化写法

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

jquery里边有一句话,是对他俩的对比,ready()可以书写多个,而window.onload只可以书写一个

你知道吗?

宣传栏