预备备~~~
1.document.readyState 属性描述文档的加载状态。
一个文档的 readyState 可以是以下之一:
(1)loading / 正在加载
文档(document)
仍在加载。
(2)interactive / 可交互
文档(document)已被解析,"正在加载"状态结束,但是诸如图像,样式表和框架之类的子资源仍在加载。表示DOMContentLoaded事件、$(function(){}) === $(document).ready();状态的事件即将被触发。
(3)complete / 完成
文档(document)和所有子资源已完成加载。表示 onload
状态的事件即将被触发。
2.当readyState属性的值变化时,document
对象上的readystatechange
事件将被触发。
3.如果对上述还是不明白可以继续看下面的例子:
html
<div class="controls">
<button id="reload" type="button">Reload</button>
</div>
<div class="event-log">
<label>Event log:</label>
<textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
</div>
js
const log = document.querySelector('.event-log-contents');
const reload = document.querySelector('#reload');
reload.addEventListener('click', () => {
log.textContent ='';
window.setTimeout(() => {
window.location.reload(true);
}, 200);
});
window.addEventListener('load', (event) => {
log.textContent = log.textContent + 'load\n';
});
document.addEventListener('readystatechange', (event) => {
log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
});
document.addEventListener('DOMContentLoaded', (event) => {
log.textContent = log.textContent + `DOMContentLoaded\n`;
});
结果展示
从结果不难发现:
(1)readyState属性的值变化时,document
对象上的readystatechange
事件将被触发。
(2)readystate值为interactive,触发DOMContentLoaded;
readystate值为complete,触发load。
4.所以我们接着模拟以下这两个事件
(1)模拟DOMContentLoaded事件
// 模拟 DOMContentLoaded/ jquery ready
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
initApplication();
}
}
(2)模拟load事件
// 模拟 load 事件
document.onreadystatechange = function () {
if (document.readyState === "complete") {
initApplication();
}
}