如何仅在外部进入/刷新/地址栏输入时显示首页Lottie预加载动画？

需要在首页仅针对以下场景展示Lottie预加载动画：

• 点击外部页面链接进入首页
• 点击浏览器刷新按钮进入首页
• 在浏览器地址栏输入URL进入首页

以下场景不展示：

• 点击站内页面链接跳转进入首页
• 通过浏览器前进/后退历史按钮导航进入首页

使用PerformanceNavigation.type/PerformanceNavigationTiming.type的方案无法区分站内链接跳转和外部链接进入这两种navigate类型的访问，导致需求无法完全实现。

核心思路是结合document.referrer判断访问来源的域名，再配合navigation.type做综合判断：

• 刷新场景（reload）直接显示
• 地址栏输入/书签等无来源场景（referrer为空）显示
• 外部域名来源的navigate场景显示
• 站内来源的navigate和历史导航（back_forward）场景不显示

完整实现代码 #

补充预加载器的隐藏逻辑，替换原有的load事件代码：

<!-- 保留原有的依赖和DOM结构 -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>

<div id="preloader">
    <div class="logo" id="home-preloader"></div>
</div>

<style>
  /* 示例预加载器样式：全屏覆盖 */
  #preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
</style>

<script>
function playPreloader() {
  var animation = bodymovin.loadAnimation({
    container: document.getElementById('home-preloader'),
    path: 'preloader.json',
    renderer: 'svg',
    loop: false,
    autoplay: true,
    name: "Home Preloader",
  });
  // 动画结束后自动隐藏预加载器（可选）
  animation.addEventListener('complete', function() {
    document.getElementById('preloader').style.display = 'none';
  });
}

function noPreloader() {
  // 直接隐藏预加载器容器
  document.getElementById('preloader').style.display = 'none';
}

window.addEventListener("load", function() {
  var performance = window.performance || window.webkitPerformance || window.msPerformance || window.mozPerformance;
  var navigation = performance.getEntriesByType("navigation")[0];
  // 获取当前页面域名
  var currentDomain = window.location.hostname;
  
  // 按场景判断是否显示预加载器
  if (navigation.type === "reload") {
    playPreloader();
  } else if (navigation.type === "navigate") {
    var referrer = document.referrer;
    if (!referrer) {
      // 无来源（地址栏输入、书签、直接打开等）
      playPreloader();
    } else {
      // 解析来源域名并对比
      var referrerDomain = new URL(referrer).hostname;
      if (referrerDomain !== currentDomain) {
        // 外部链接进入
        playPreloader();
      } else {
        // 站内链接跳转
        noPreloader();
      }
    }
  } else if (navigation.type === "back_forward") {
    // 历史前进/后退导航
    noPreloader();
  } else {
    // 其他未知场景默认隐藏
    noPreloader();
  }
});
</script>

关键说明 #

1. 域名判断：通过new URL(referrer).hostname解析来源域名，和当前域名window.location.hostname对比，精准区分站内/外部链接。
2. 无来源场景处理：document.referrer为空时，对应地址栏输入、书签、直接打开等场景，需要触发预加载器。
3. 动画收尾：可选添加动画完成后的自动隐藏逻辑，避免预加载器一直停留在页面上。

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