本文提供一种可靠方案，通过 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+）
<!-- 假设已引入 jQuery 和 lottie-web --> <script src="https://code.jquery.com/jquery-3.6.3.min.js"></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>
// 预加载控制函数
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 锁定滚动，需确保 <body> 无 position: fixed 等干扰样式；动画结束后务必调用 document.body.classList.remove(...) 恢复滚动。
- Lottie 加载优化：建议将 preloader.json 放置于 CDN，并启用 HTTP/2 及缓存头（Cache-Control: public, max-age=31536000），避免重复请求阻塞动画启动。
✅ 最终效果验证清单
| 触发方式 | 是否播放动画 | 说明 |
|---|---|---|
| 地址栏输入 https://yoursite.com/ | ✅ | navigate + 空 referrer → 视为新入口 |
| 点击 Google 搜索结果链接进入 | ✅ | navigate + 外部 referrer |
| 点击站内 <a href="/">首页</a> | ❌ | navigate + 内部 referrer |
| 按 F5 或 Ctrl+R 刷新首页 | ✅ | reload 类型明确匹配 |
| 点击浏览器「后退」回到首页 | ❌ | back_forward 类型拦截 |
| 从 PWA 启动或桌面快捷方式打开 | ✅ | 属于 navigate，无 referrer，按新入口处理 |
此方案兼顾现代标准与向后兼容性，逻辑清晰、无第三方依赖，可直接集成到任意基于 Lottie 的首页预加载流程中。
