Welcome 微信登录

首页 / 脚本样式 / JavaScript / JS/CSS/IMG加载顺序关系之DOMContentLoaded事件

JS/CSS/IMG加载顺序关系之DOMContentLoaded事件2015-06-03DOMContentLoaded介绍

DOMContentLoaded事件的触发条件是:

将会在“所有的DOM全部加载完毕并且JS加载执行后触发”。

但如果“js是通过动态加载进来的话,是不会影响到DOMContentLoaded的触发时间”

如下图所示,蓝色的线代表DOMContentLoaded开始触发,但前提是JS已经加载完毕并执行了。

(仅仅是DOM 并不是onload事件整个页面全部加载完毕触发,DOMContentLoaded比onload要早触发 请区分开,onload为红线 表示页面已经全部加载完毕)

IMG和CSS在DOMContentLoaded触发前都做了些什么?

上面说到在DOMContentLoaded触发之前,JS已经执行完毕。

但是IMG和CSS呢?我们看下图:DOMContentLoaded事件触发了,但是有的图片被阻挡了。

阻挡也就意味着被浏览器进行了延迟加载,虽然图片请求很早就发了出去。

但是浏览器认为你的CSS没有加载完毕,不确定图片的样式到底如何,牵扯到重绘资源问题。