使用下面的代码,我在按下按钮后隐藏图像。当我在其他页面之间导航时,图像应该保持隐藏状态。这工作正常。当用户点击浏览器刷新时,图像应该再次出现。问题是图像仅在用户单击刷新两次后才出现。我希望它在单击后出现。为了清楚起见,以下是摘要。
单击按钮时,图像被隐藏 -> 它工作正常!
当浏览其他页面并返回此页面时,图像应该保持隐藏 -> 它工作正常!
当用户单击浏览器刷新时,图像应该出现 -> 这效果不佳,因为图像仅在双击浏览器刷新后出现。我希望通过单击浏览器刷新来显示图像。
<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")
if (performance.navigation.type === 1) {
visibility = sessionStorage.getItem("visibility")
let currentTime = new Date().getTime();
let lastLoadedTime = sessionStorage.getItem('lastLoadedTime');
sessionStorage.setItem("visibility", "visible");
image.style.display = "block"
if (lastLoadedTime && (currentTime - lastLoadedTime) < 1000) {
sessionStorage.setItem("visibility", "visible");
image.style.display = "block"
}
sessionStorage.setItem('lastLoadedTime', currentTime);
}
btnClose.addEventListener('click', () => {
image.style.display = "none"
sessionStorage.setItem("visibility", "invisible");
})
if (visibility == "invisible") {
image.style.display = "none"
} else if (visibility == "visible") {
image.style.display = "block"
}
})()
</script>
</body>
</html>
更新并检查它现在应该可以工作了:
<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&cache_bust=<%= new Date().getTime() %>" 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');
if (performance.navigation.type === 1) {
let currentTime = new Date().getTime();
let lastLoadedTime = sessionStorage.getItem('lastLoadedTime');
if (lastLoadedTime && (currentTime - lastLoadedTime) < 1000) {
visibility = sessionStorage.getItem('visibility');
image.style.display = visibility === 'visible' ? 'block' : 'none';
} else {
sessionStorage.setItem('visibility', 'visible');
visibility = 'visible';
image.style.display = 'block';
}
sessionStorage.setItem('lastLoadedTime', currentTime);
}
btnClose.addEventListener('click', () => {
image.style.display = 'none';
sessionStorage.setItem('visibility', 'invisible');
});
if (visibility === 'invisible') {
image.style.display = 'none';
} else {
image.style.display = 'block';
}
})();
</script>
</body>
</html>
希望对你有帮助