HTML | DOM 进度对象

HTML5引入了一种新的API，允许开发者通过JavaScript去跟踪对文档、资源以及脚本的加载进度。这个API就是HTML DOM进度对象。

进度对象提供了许多属性和方法，可用于跟踪文档和脚本的加载进度，以便适时更新用户界面等应用场景。

如何使用进度对象?

进度对象是通过Document对象的属性readyState来获取的，其类型为progressEvent或null。在文档加载过程中，readyState的值不断变化。一般来说，当文档的readyState为interactive时，HTML部分已经加载完毕，所有脚本都已解释完毕,网页开始显示但CSS同步加载中。当 文档的readyState为complete时，页面已经完成了所有加载，网页显示完成。

以下是文档的readyState属性值的详细描述：

• loading ：文档正在加载。
• interactive ：文档已经完成解析，但是仍在等待其他资源加载。（HTML部分加载完毕，所有脚本都已解释完毕）
• complete ：文档和所有子资源已经完成加载。

下面是一个基本的例子，用于显示文档的加载进度:

<script>
    var progressBar = document.getElementById("progressBar");
    var loadingIndicator = document.getElementById("loadingIndicator");

    document.onreadystatechange = function() {
      if (document.readyState === "loading") {
        // document正在加载
        progressBar.style.display = "";
        loadingIndicator.style.display = "none";
      } else if (document.readyState === "interactive") {
        // HTML部分加载完毕，所有脚本都已解释完毕（CSS同步加载中）
        progressBar.value = 0.5;
        loadingIndicator.style.display = "none";
      } else if (document.readyState === "complete") {
        // 网页加载完成
        progressBar.value = 1.0;
        progressBar.style.display = "none";
        loadingIndicator.style.display = "none";
      }
    };
</script>

进度对象的属性

进度对象提供了以下属性：

| 属性 | 描述 | |------------------------|--------------------------------------------| | Document.readyState | 一个字符串，描述文档加载状态。此属性有三个可选值："loading"、"interactive"、"complete"。

进度对象的方法

进度对象还提供了以下方法：

| 方法 | 描述 | |-------------|------------------------------------------------------------------------------------| | ProgressEvent.cancelBubble() | 防止进度事件传递给任何侦听器。 | | ProgressEvent.stopPropagation() | 防止事件传播到DOM树上。 | | ProgressEvent.stopImmediatePropagation() | 取消事件未被完全处理前任何后续事件的侦听器调用。|

结论

通过使用HTML DOM进度对象，你可以轻松跟踪文档和脚本的加载进度。这将帮助你管理文件加载和响应用户选择的行为。在实践中使用进度对象需要经验和技能，因此请确保你已经掌握了相关知识并致力于不断提高。