关于load的分析

  //文档状态的变化
  //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

猜你喜欢

转载自blog.csdn.net/javawebty/article/details/80911503