如何仅在页面刷新或从站外链接进入时运行 JavaScript 函数

本文提供一种可靠方案，通过 performance.getentriesbytype(‘navigation’) 结合 document.referrer 判断页面加载方式，精准控制 lottie 预加载动画仅在首次访问（外部跳转、地址栏输入、手动刷新）时显示，避免内部导航触发。

在单页应用或传统多页网站中，为首页添加轻量级 Lottie 预加载动画（preloader）能提升首屏感知性能，但必须严格限制其触发场景：仅当用户从站外链接进入、直接在地址栏输入 URL 或手动刷新页面时才播放；而内部导航（如点击站内菜单、浏览器前进/后退）应完全跳过该动画，否则会破坏用户体验流畅性。

核心挑战在于区分「新会话式进入」与「历史导航式进入」。现代浏览器的 PerformanceNavigationTiming API（已取代废弃的 window.performance.navigation）提供了标准化的加载类型标识，配合 document.referrer 可精准识别来源性质。

✅ 推荐实现方案（兼容 chrome 60+、firefox 58+、edge 79+、safari 15.4+）

// 预加载控制函数 function yesPreloader() {   document.getElementById('preloader').style.display = 'block'; } function noPreloader() {   document.getElementById('preloader').style.display = 'none'; }  function playPreloader() {   bodymovin.loadAnimation({     container: document.getElementById('home-preloader'),     path: 'preloader.json',     renderer: 'svg',     loop: false,     autoplay: true,     name: "Home Preloader"   }); }  // 主逻辑：监听页面加载时机 window.addEventListener('load', function () {   // 获取导航性能数据（优先使用现代 API）   const navEntries = performance.getEntriesByType('navigation');   const navEntry = navEntries.length > 0 ? navEntries[0] : NULL;    let loadType = 'unknown'; // 'navigate' | 'reload' | 'back_forward' | 'prerender'    if (navEntry) {     loadType = navEntry.type;   } else if (window.performance.navigation) {     // 降级兼容旧版（仅 IE / 早期 Chrome）     const nav = window.performance.navigation;     loadType = nav.type === nav.TYPE_RELOAD ? 'reload' :                nav.type === nav.TYPE_BACK_FORWARD ? 'back_forward' :                'navigate';   }    // 核心判断逻辑   if (loadType === 'reload') {     // ✅ 场景2：手动刷新 → 显示预加载     document.body.classlist.add('overflow-x-hidden', 'overflow-y-hidden');     playPreloader();     yesPreloader();   }   else if (loadType === 'navigate') {     // ✅ 场景1 & 3：外部链接 or 地址栏输入     // 通过 referrer 判定是否为站内跳转     const isInternal = document.referrer &&                         new URL(document.referrer).hostname === location.hostname;      if (isInternal) {       // ❌ 站内链接 → 隐藏预加载       noPreloader();     } else {       // ✅ 外部链接或直接输入 URL → 显示预加载       document.body.classList.add('overflow-x-hidden', 'overflow-y-hidden');       playPreloader();       yesPreloader();     }   }   else if (loadType === 'back_forward') {     // ❌ 浏览器历史导航 → 隐藏预加载     noPreloader();   }   else if (loadType === 'prerender') {     // ⚠️ 预渲染（如 Chrome 的预加载）→ 不触发动画（避免资源浪费）     noPreloader();   }   else {     // 兜底：未知类型，默认不播放     noPreloader();   } });

⚠️ 关键注意事项

• document.referrer 并非 100% 可靠：httpS 页面跳转至 HTTP 页面时会被清空；用户启用隐私模式、禁用 referrer 策略（如 Referrer-Policy: no-referrer）时也可能为空。此时应将空 referrer 视为「可信的新入口」，即按外部访问处理（本方案已默认涵盖）。
• 不要依赖 window.history.state 或 pageshow 事件：pageshow 的 Event.persisted 仅反映 bfcache 状态，无法区分外部/内部来源；且 history.state 在初始加载时为 null，不可作为判断依据。
• css 层级与滚动锁定：示例中通过 overflow-x/y-hidden 锁定滚动，需确保 无 position: fixed 等干扰样式；动画结束后务必调用 document.body.classList.remove(…) 恢复滚动。
• Lottie 加载优化：建议将 preloader.json 放置于 CDN，并启用 HTTP/2 及缓存头（Cache-Control: public, max-age=31536000），避免重复请求阻塞动画启动。

✅ 最终效果验证清单

此方案兼顾现代标准与向后兼容性，逻辑清晰、无第三方依赖，可直接集成到任意基于 Lottie 的首页预加载流程中。