DOM 加载事件

监听 DOM 文档是否加载成功，在使用 jquery 可以使用 $(document).ready(function(){}) 来实现，用 js 来实现要怎么做？

DOMContentLoaded

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和 iframe 的完成加载。不同于 window 的 load 事件，会等所有的样式，图片，子框架都加载完才会触发

document.addEventListener('DOMContentLoaded', function () {
  console.log('document loaded');
});

onreadystatechange

在 document 绑定 onreadystatechange 事件可以在对应的 dom 加载过程中触发相应的回调，通过 document.readyState 来获取状态，有三种状态

  • loading：文档正在加载中
  • interactive：文档加载完，但是其他资源（图片，样式）还在加载中，等同于上面的 DOMContentLoaded
  • complete：文档和其他资源都加载完了
document.onreadystatechange = function () {
  console.log(document.readyState);
};

对 ie 低版本还有一个利用定时器监听（document.documentElement || document.body）的 doScroll('left')方法

JS 加载事件

动态加载 js 文件，判断 js 是否加载完成，例如

var s = document.createElement('script');
s.src = 'https://cdn.bootcss.com/require.js/2.3.5/require.min.js';
s.onload = function () {
  JSLoaded();
};
// 兼容ie
s.onreadystatechange = function () {
  if (s.readyState === 'complete') {
    JSLoaded();
  }
};
document.getElementsByTagName('head')[0].appendChild(s);

CSS 加载事件

动态加载 css 文件，判断 css 文件是否加载完成，可以类似跟上面一样，绑定 onload 事件或者监听 readyState 状态，还可以通过 document.styleSheets 数组的长度来判断

var cssnum = document.styleSheets.length;
var l = document.createElement('link');
l.href = 'https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap-grid.css';
l.rel = 'stylesheet';
document.getElementsByTagName('head')[0].appendChild(l);
var cssLoadTimer = setInterval(function () {
  if (document.styleSheets.length > cssnum) {
    // 执行css load事件
    CSSLoaded();
    clearInterval(cssLoadTimer);
  }
}, 10);