DOM/JS/CSS动态加载处理

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);