除了在页面之间导航时如何显示预加载器？

Question

预加载器/加载页面是一个包含图像的整个页面div 。 它可以作为我网站的介绍页面。 我希望此预加载器/加载页面仅在某些条件下显示，并且仅在单击时才显示。

出现预加载器/加载页面的条件：

• 用户第一次进入网站时，
• 用户关闭选项卡并打开另一个选项卡，
• 用户已经在网站上并刷新页面，
• 用户将网站 url 粘贴到空白页面中。

当不应出现预加载器/加载页面时：

• 我已经在网站上，我从一个页面更改为另一个页面

是否可以在这些条件下创建预加载器？ 如果是，除了在页面之间导航时，我如何显示我的预加载器？

这是我的代码：

HTML

<center id="splashscreen">
    <img id="splashcontent" src="https://www.w3schools.com/html/pic_trulli.jpg">
</center>

CSS

#splashscreen {
    background-color: white;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 998;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
}
#splashscreen.show {
    visibility: visible;
    opacity: 1;
}
#splashcontent {
    max-width: 400px;
    width: 100%;
    height: auto;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

第一次尝试（问题：显然预加载器不会在刷新时出现）：

JQUERY

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    function Preloader() {
    var preloader = $("#splashscreen");
    preloader.addClass('show');
    $('html, body').css({ 'overflow': 'hidden' })
    $("#splashscreen").click(function(){
    $(this).fadeOut(500);
    $('html, body').css({ 'overflow': 'auto' })
    });
    }
    if (!sessionStorage.getItem('doNotShow')) {
    sessionStorage.setItem('doNotShow', true);
    Preloader();
    } else {
    $("#splashscreen").remove();
    }
});
</script>

第二次尝试（问题：链接的点击 function 不起作用）：

JQUERY

<script type="text/javascript">
$(document).ready(function() {
    var preloader = $("#splashscreen");
    preloader.addClass('show');
    $('html, body').css({ 'overflow': 'hidden' })
    $("#splashscreen").click(function(){
    $(this).fadeOut(500);
    $('html, body').css({ 'overflow': 'auto' })
    });
    $("a").click(function(){
    $("#splashscreen").hide();
    });
});  
</script>

Answer 1

在指向不同页面的所有链接上添加事件侦听器。 在该侦听器中，使用sessionStorage或localStorage存储链接的 url。

加载页面时，检查sessionStorage中的数据，如果它存在并且匹配当前 url 并且history.length大于 1，请不要使用预加载器页面。 从sessionStorage中删除数据，以便在页面刷新时不会再次使用它。

这是一个例子

let status = "page opened for the first time, refreshed or opened in a new window/tab";

const storageName = "clickedLink";
const storageData = JSON.parse(sessionStorage.getItem(storageName));
if (storageData !== null)
{
  if (storageData.url == location.href && history.length != 1)
  {
    status = "new page loaded";
  }
  else
  {
    status = "page refreshed or expired";
  }

  sessionStorage.removeItem(storageName);
}

document.body.addEventListener("click", onClickPage);

function onClickPage(e)
{
  const el = e.target;
  //because we are listening clicks on body, make sure we process only <a href=...> elements
  if (el.tagName != "A" || el.href.match(/#reload$/))
    return;

  //store information about the click
  sessionStorage.setItem(storageName, JSON.stringify({
    url: el.href,
    dateClicked: new Date()
  }));
}

https://jsfiddle.net/ybhnz5x9