请求修复：浏览器单次刷新后无法显示隐藏图片的问题

问题根源 #

1. 逻辑顺序错误：原代码检测到页面刷新后，虽修改了sessionStorage中的visibility值，但后续判断图片显示状态时，使用的是初始化阶段获取的旧visibility变量值，未同步更新，导致第一次刷新时图片仍保持隐藏。
2. API已废弃：performance.navigation.type属于已废弃的API，需用标准Navigation API替代。
3. 冗余逻辑干扰：lastLoadedTime相关逻辑完全多余，增加了代码复杂度。

修正后的代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn-close {
            width: 166px;
            height: 44px;
            margin-top: 12px;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div class="img-container">
        <img class="img" src="https://images.pexels.com/photos/163236/luxury-yacht-boat-speed-water-163236.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
        <button class="btn-close">Fechar</button>
    </div>
    <script>
        (function () {
            const image = document.querySelector('.img')
            const btnClose = document.querySelector('.btn-close')
            let visibility = sessionStorage.getItem("visibility")

            // 使用标准Navigation API检测页面刷新
            if (navigation.currentEntry?.type === 'reload') {
                // 刷新时重置状态为显示
                visibility = "visible"
                sessionStorage.setItem("visibility", visibility);
                image.style.display = "block"
            }

            btnClose.addEventListener('click', () => {
                image.style.display = "none"
                sessionStorage.setItem("visibility", "invisible");
                visibility = "invisible" // 同步更新变量
            })

            // 根据最新的visibility值设置显示状态
            if (visibility === "invisible") {
                image.style.display = "none"
            } else {
                // 默认或visible状态都显示图片
                image.style.display = "block"
            }
        })()
    </script>
</body>
</html>

关键修改说明 #

• 替换刷新检测逻辑：用navigation.currentEntry?.type === 'reload'替代废弃的performance.navigation.type === 1，兼容现代浏览器。
• 同步变量与存储：刷新重置或点击隐藏时，同步更新visibility变量，确保后续判断使用最新值。
• 简化显示判断：默认（未设置状态或状态为visible）时显示图片，逻辑更清晰。
• 移除冗余代码：删除不必要的lastLoadedTime相关逻辑，减少干扰。

内容的提问来源于stack exchange，提问作者claudiopb