今天做个大屏项目, 想在大屏加载所有资源前加个加载动画, 加载结束再移除, 当然肯定时在load事件里进行移除, 但是对其他的事件有点模糊了, 复习一下哦垃圾
生命周期事件
-
DOMContentLoaded, 浏览器完成HTML的加载, 并构建DOM树, 图片和样式等外部资源还没加载完成 -
load, 浏览器加载完所有资源, 包括HTML文档, 图片, 样式等 -
beforeunload, 用户即将离开, 用来检查用户是否保存了修改, 并询问是否真的要离开 -
unload, 用户几乎已经离开, 但是可以启动一些操作, 比如发送统计数据
1. DOMContentLoaded
DOMContentLoaded 事件发生在 document 对象上, 必须使用document对象上
2. window.onload
当包括样式、图像和其他资源的页面被全部加载时，window 对象上的 load 事件就会被触发
3. window.onunload
当访问者离开页面时，window 对象上的 unload 事件就会被触发。我们可以在那里做一些不涉及延迟的事件，比如关闭相关的弹出窗口
可以在用户离开时, 使用unload事件发送我们想要保存在服务器上的数据
参考https://w3c.github.io/beacon/, 可以使用navigator.sendBeacon(url, data)方法来发送数据
let analyticsData = { /* 收集了数据的对象 */ };
window.addEventListener("unload", function() {
navigator.sendBeacon("/analytics", JSON.stringify(analyticsData));
};
- 请求以 POST 方式发送。
- 我们不仅能发送字符串，还能发送表单以及其他格式的数据，在 文章 "fetch-basics" 未找到 章节我们已有说明，但是通常情况下它是一个字符串化的对象。
- 数据大小限制在 64kb。
当 sendBeacon 请求完成的时候，浏览器可能已经离开了文档，所以就没办法获取服务器的响应数据
4. window.onbeforeunload
如果访问中触发了离开页面的导航或试图关闭窗口，beforeunload 将要求提供更多的确认信息
如果我们取消该事件，浏览器将会询问用户是否确定
window.onbeforeunload = function() {
return false
}
5. readyState
document.readyState 属性为我们提供了一些关于当前加载状态的信息
-
loading—— 文档正在被加载。 -
interactive—— 文档被全部读取。 -
complete—— 文档被全部读取，并且所有的资源（图像之类的）都被加载。
function work() { /*...*/ }
if (document.readyState == 'loading') {
// 正在加载，等待事件
document.addEventListener('DOMContentLoaded', work);
} else {
// DOM 已经准备就绪！
work();
}
