zoukankan      html  css  js  c++  java
  • 页面加载顺序及触发的事件

    页面加载大致的几个步骤

    1.开始解析HTML文档结构。

    2.加载外部样式表及JavaScript脚本。

    3.解析执行JavaScript脚本。

    4.DOM树渲染完成。

    5.加载未完成的资源(如图片)。

    6.页面加载成功。

    页面加载触发的事件

    1.document的readystatechange事件

    简单例子:

    document.onreadystatechange = function() { // 文档加载状态改变事件处理
        if (document.readyState === "loading") { // document加载中
            console.log(document.readyState);
        }
        if (document.readyState === "interactive") { // 互动文档加载完成,文档解析完成,但是如图像,样式表和框架等子资源仍在加载中
            console.log(document.readyState);
        }
        if (document.readyState === "complete") { // 文档和所有子资源加载完成,load事件即将被触发
            console.log(document.readyState);
        }
    }

    readyState属性描述了文档的加载状态,整个加载过程中document.readyState会不断变化,每次变化都触发readystatechange事件。

    也可以用事件监听器去绑定:

    document.addEventListener("readystatechange", function() {
        console.log(document.readyState);
    });

    2.document的DOMContentLoaded事件

    DOM树渲染完成时候触发DOMContentLoaded事件,此时可能外部资源还在加载。jQuery中的ready事件就是实现的这个事件。

    3.window的load事件

    当所有的资源全部加载完成后就会触发window的load事件。

    "-。-"

  • 相关阅读:
    Spring面试题目
    20个非常有用的Java程序片段
    第一个前台页面----xflow的页面
    java中io对文件操作的简单介绍
    java的两种异常runtimeException和checkedException
    jquery的校验规则的方法
    json对象的简单介绍
    http的状态码(中英文)
    eclipse的调试方法的简单介绍
    软件测试人员需要精通的开发语言(3)--- Linux
  • 原文地址:https://www.cnblogs.com/yanggb/p/9154779.html
Copyright © 2011-2022 走看看