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

 

标签: javascript

如果本文对您有所帮助,可以扫下面二维码给我支持,您的鼓励是我前进的动力!

微信

支付宝

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论