美文网首页
window.load 和$(document).ready()

window.load 和$(document).ready()

作者: sdcV | 来源:发表于2017-07-27 17:05 被阅读99次

    <b>一、DOM文档加载的步骤为:</b>

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

    <b>二、区别</b>

    1. 执行时间不同
    • window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

    • $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

    • 在第4步,会触发DOMContentLoaded事件。在第6步,触发load事件。
      //原生js写法
      document.addEventListener("DOMContentLoaded", function() {
      // ...代码...
      }, false);

        window.addEventListener("load", function() {
        // ...代码...
        }, false);
      
    1. 编写个数不同
    • window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
    • $(document).ready()可以同时编写多个,并且都可以得到执行

    3 简化写法

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

    4 jquery写法

    //Jquery 代码如下: 
    $(window).load(function (){ 
    // 编写代码 
    });等价于 JavaScript 中的以下代码 
    Window.onload = function (){ 
    // 编写代码 
    }
    

    相关文章

      网友评论

          本文标题:window.load 和$(document).ready()

          本文链接:https://www.haomeiwen.com/subject/qxazkxtx.html