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