关于load的分析

最新推荐文章于 2020-03-10 13:48:19 发布

原创最新推荐文章于 2020-03-10 13:48:19 发布 · 378 阅读

0 ·

CC 4.0 BY-SA版权

JAVASCRIPT 专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍了页面加载过程中涉及的各种事件，如DOMContentLoaded与onload的区别，以及如何使用这些事件来优化用户体验。通过具体示例展示了不同事件触发时机及其应用场景。

部署运行你感兴趣的模型镜像

  //文档状态的变化
  //document是文档
  //document.documentElement 是DOM树文档
  document.onreadystatechange = function () {
    console.log(document.readyState);
  }
  /**
   * onload 属性在文档对象加载完成后触发。
   * onload 通常使用于 <body> 元素中，用于在页面完全载入后执行指定的脚本(包括图片，脚本，css文件等)。
   * onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。
   * onunload
   * 页面加载时只执行onload 
   *页面关闭时先执行onbeforeunload，最后onunload 
   *页面刷新时先执行onbeforeunload，然后onunload，最后onload。 
   * */
  /**
   * 当初始的 HTML 文档被完全加载和解析完成之后，
   * DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。
   * 另一个不同的事件 load 应该仅用于检测一个完全加载的页面。 
   * 在使用 DOMContentLoaded 更加合适的情况下使用 load 是一个令人难以置信的流行的错误，所以要谨慎。
   * document.addEventListener("DOMContentLoaded", function(event) {
   *  console.log("DOM fully loaded and parsed");
   *});
   */
  //document.readyState == complete 与 onload事件出发状态是是一致地，都是页面全部加载好
  document.addEventListener("DOMContentLoaded", function (event) {
    console.log("DOM fully loaded and parsed");
  });

  $(document).ready(function () {
    console.log("jquery ready is Ok")
  });

以下是控制台输出

interactive
 jquery ready is Ok
 DOM fully loaded and parsed
complete
 load is Ok

您可能感兴趣的与本文相关的镜像

Langchain-Chatchat

AI应用

Langchain

Langchain-Chatchat 是一个基于 ChatGLM 等大语言模型和 Langchain 应用框架实现的开源项目，旨在构建一个可以离线部署的本地知识库问答系统。它通过检索增强生成 (RAG) 的方法，让用户能够以自然语言与本地文件、数据库或搜索引擎进行交互，并支持多种大模型和向量数据库的集成，以及提供 WebUI 和 API 服务