如何解决网站预加载器重复加载及sessionStorage失效问题？

嘿，我来帮你分析下问题出在哪，以及怎么解决：

你的核心问题是事件触发时机不对，再加上浏览器的「前进后退缓存（BF Cache）」在搞鬼。

问题根源拆解 #

1. 你当前的代码是等window.load事件触发后才检查sessionStorage，但当你从其他页面后退回首页时，浏览器大概率会从BF缓存里直接恢复页面——这时候window.load事件根本不会再次触发，因为页面资源早就加载过了。
2. 但你的预加载器是写在HTML里的默认显示状态，这就导致缓存恢复后，预加载器一直停在页面上，却没有代码去触发隐藏逻辑，自然就卡在「Loading」状态了。

修正后的解决方案 #

我们需要调整逻辑：DOM一就绪就先检查缓存状态，同时处理BF缓存的场景，确保不管是首次加载还是缓存恢复，预加载器都能正确显示/隐藏。

替换你的preloader.js为以下代码：

jQuery(document).ready(function($) {
    // 页面初始化第一步：检查sessionStorage，判断是否已经加载过
    if (sessionStorage.getItem('dontLoad')) {
        // 直接隐藏预加载器，移除body的loading类
        $(".preloader").hide();
        $('body').removeClass('loading');
    } else {
        // 首次加载：等待页面完全加载完成后隐藏预加载器
        $(window).on('load', function(){
            $(".preloader").fadeOut(500, function() {
                $('body').removeClass('loading');
            });
            sessionStorage.setItem('dontLoad', 'true');
        });
    }

    // 处理浏览器后退/前进缓存（BF Cache）的特殊情况
    $(window).on('pageshow', function(event) {
        // event.persisted 表示页面是从缓存中恢复的
        if (event.persisted && sessionStorage.getItem('dontLoad')) {
            $(".preloader").hide();
            $('body').removeClass('loading');
        }
    });
});

代码说明 #

• DOM就绪立即检查缓存：避免了等待window.load的延迟，确保页面一开始就处理预加载器状态，不会出现不必要的显示
• pageshow事件监听：专门处理BF缓存场景，当页面从缓存恢复时，强制隐藏预加载器
• 把fadeOut(0)改成了fadeOut(500)（你也可以改回0），让隐藏过程有过渡动画，体验更流畅

这样修改后，不管是首次加载，还是从其他页面返回首页，预加载器都只会在第一次显示，之后再也不会卡住啦。

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