按下浏览器刷新后隐藏的图像出现,只需点击一下

问题描述 投票:0回答:1

使用下面的代码,我在按下按钮后隐藏图像。当我在其他页面之间导航时,图像应该保持隐藏状态。这工作正常。当用户点击浏览器刷新时,图像应该再次出现。问题是图像仅在用户单击刷新两次后才出现。我希望它在单击后出现。为了清楚起见,以下是摘要。

  • 单击按钮时,图像被隐藏 -> 它工作正常!

  • 当浏览其他页面并返回此页面时,图像应该保持隐藏 -> 它工作正常!

  • 当用户单击浏览器刷新时,图像应该出现 -> 这效果不佳,因为图像仅在双击浏览器刷新后出现。我希望通过单击浏览器刷新来显示图像。

      <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>
    
javascript html css session-storage
1个回答
0
投票

更新并检查它现在应该可以工作了:

<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>

希望对你有帮助

© www.soinside.com 2019 - 2024. All rights reserved.