visibilitychange 事件

visibilitychange 事件是当文档的可见性发生变化时触发的一个事件。例如，当用户切换到另一个标签页或最小化浏览器窗口时，该事件会被触发。

监听 visibilitychange 事件

要监听 visibilitychange 事件，可以使用 addEventListener 方法或者直接在元素上添加事件处理程序。以下是一个简单的示例：

document.addEventListener('visibilitychange', handleVisibilityChange);

处理函数

处理函数可以检查当前文档是否可见，并根据需要执行相应的操作。可以通过 document.visibilityState 属性来获取当前文档的可见状态。visibilityState 可能的值包括：

• visible: 文档在前端显示。
• hidden: 文档不可见，例如用户切换到另一个标签页或最小化了浏览器窗口。
• prerender: 文档正在后台预渲染，但在大多数浏览器中这个状态很少出现。

// www.javascriptcn.com code example
function handleVisibilityChange() {
    if (document.visibilityState === 'hidden') {
        console.log('文档已隐藏');
        // 执行隐藏时的操作
    } else {
        console.log('文档已恢复显示');
        // 执行显示时的操作
    }
}

使用示例

以下是一个更复杂的示例，展示了如何使用 visibilitychange 事件来优化网页性能和用户体验：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Visibilitychange 示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #status {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div id="status">文档可见</div>

    <script>
        document.addEventListener('visibilitychange', function() {
            if (document.visibilityState === 'hidden') {
                document.getElementById('status').textContent = '文档隐藏';
                // 关闭不必要的动画或定时器，以节省资源
            } else {
                document.getElementById('status').textContent = '文档可见';
                // 恢复必要的动画或定时器
            }
        });
    </script>
</body>
</html>

在这个示例中，当文档变为不可见时，会更新页面上的状态显示并关闭一些可能消耗资源的动画或定时器。当文档重新变得可见时，会更新状态显示并重新启动这些动画或定时器。

总结

visibilitychange 事件对于优化网页性能和改善用户体验非常有用。通过监听此事件，你可以检测到文档何时变为不可见，并采取适当的措施，比如暂停动画或停止不重要的后台任务，从而减少资源消耗。同样地，当文档重新变得可见时，你可以恢复之前暂停的操作，确保用户获得最佳体验。