DOM/JS/CSS动态加载处理

2017-05-06

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);
本文为原创,未经授权,禁止任何媒体或个人自媒体转载
商业侵权必究,如需授权请联系340443366@qq.com
标签: javascript

评论

Loading...

最新评论

相关推荐

前端登录凭证存储方案
现在是前后端分离时代,接口登录凭证通常使用cookie,session,web storage来实现,三种方法区别可以阅...
React17.0生命周期调整
在即将到来的react17.0版本,react团队对生命周期做了调整,将会移除 componentWillMount,c...
ES6装饰器的应用
什么是装饰器 装饰器(Decorator)函数,是用来修改类的行为,一个装饰器函数有三个参数 target 装饰...
scroll-top-icon