如何写一个DOM加载完成的执行行数

最新推荐文章于 2023-05-16 17:10:09 发布

meloseven

最新推荐文章于 2023-05-16 17:10:09 发布

阅读量500

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： jquery dom

本文链接：https://blog.youkuaiyun.com/meloseven/article/details/70615351

Javascript 专栏收录该内容

47 篇文章

订阅专栏

本文详细解释了在前端开发中如何确保JavaScript代码在DOM加载完成后执行。通过分析jQLite的ready方法，介绍了document.readyState属性的不同状态及其意义，并对比了DOMContentLoaded与load事件的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

像在jquery中会有$(function(){})或者$.ready(function(){})来使代码在DOM加载完成后执行。那么这里面的原理是怎么样的。先看下面代码：

ready: function(fn) {
    var fired = false;

    function trigger() {
      if (fired) return;
      fired = true;
      fn();
    }

    // check if document already is loaded
    if (document.readyState === 'complete'){
      setTimeout(trigger);
    } else {
      this.on('DOMContentLoaded', trigger); // works for modern browsers and IE9
      // we can not use jqLite since we are not done loading and jQuery could be loaded later.
      // jshint -W064
      JQLite(window).on('load', trigger); // fallback to window.onload for others
      // jshint +W064
    }
  },

这个是jQLite的ready方法，可以看出，主要是利用了document的readystate和window的load事件。
document.readyState主要有三个参数：loading，interactive，complete。

loading表示document正在加载中；
interactive表示document加载完成了，但是资源例如图片样式等还没有加载完；
completer表示所有都加载完了；

以下是兼容性：
document.readyState兼容性

再说说DOMContentLoaded(不支持IE8)与load事件：

DOM文档加载的步骤为

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

用原生js可以这么写

// 不兼容老的浏览器，兼容写法见[jQuery中ready与load事件](http://www.imooc.com/code/3253)，或用jQuery
document.addEventListener("DOMContentLoaded", function() {
   // ...代码...
}, false);

window.addEventListener("load", function() {
    // ...代码...
}, false);

用jQuery这么写

// DOMContentLoaded
$(document).ready(function() {
    // ...代码...
});

//load
$(document).load(function() {
    // ...代码...
});