浏览器返回上一页时页面卡在preloader加载状态的jQuery问题

• 已实现功能：编写jQuery逻辑实现点击页面内链接时，跳转前显示加载动画，当前该功能运行正常
• 存在异常：跳转至其他页面后点击浏览器返回按钮，原页面会持续停留在加载状态，无法正常展示内容

现代浏览器为了优化前进/后退操作的加载速度，内置了*往返缓存（bfcache）*机制：用户离开页面时，浏览器会将当前页面的完整DOM、JS运行状态快照保存在内存中；当用户点击返回按钮回到该页面时，浏览器会直接从内存中恢复快照，不会重新触发页面加载、DOMContentLoaded/document.ready事件。
现有代码中点击链接时会移除.lm-preloader的lm-hidden类让加载动画显示，这个状态会被bfcache完整记录。返回页面时，原本页面加载完成后隐藏加载动画的逻辑不会重新执行，就会出现加载动画常驻的问题。

• 新增pageshow事件监听，专门处理bfcache恢复页面的场景：每次页面展示（包括从bfcache恢复的情况）时，都强制重置预加载器状态，确保加载动画被正确隐藏
• 优化链接点击逻辑，过滤不需要触发页面跳转的链接（比如锚点链接、JS伪协议链接、新标签打开的链接），避免不必要的加载动画触发

! function (l) {
    "use strict";
    // 抽离预加载器隐藏逻辑，方便复用
    function hidePreloader() {
        $(".lm-loading").animate({
            opacity: 1
        }, {
            duration: 500,
        });
        setTimeout(function() {
            $('.lm-preloader-number').each(function() {
                var $this = $(this),
                    countTo = $this.attr('data-count');
                $({
                    countNum: $this.text()
                }).animate({
                    countNum: countTo
                }, {
                    duration: 1000,
                    easing: 'swing',
                    step: function() {
                        $this.text(Math.floor(this.countNum));
                    },
                });
            });
            $(".lm-bar").animate({
                height: '100%'
            }, {
                duration: 1000,
                complete: function() {
                    $(".lm-preloader").addClass('lm-hidden')
                }
            });
        }, 400);
    }

    // 页面首次加载时执行预加载隐藏逻辑
    $(document).ready(hidePreloader);

    // 监听pageshow事件，处理bfcache返回的场景
    $(window).on("pageshow", function(e) {
        // 识别从bfcache恢复的页面，强制重置预加载器状态
        if (e.originalEvent.persisted) {
            $(".lm-preloader").addClass('lm-hidden');
            // 重置进度条、计数等预加载器相关状态
            $(".lm-bar").stop().css("height", "0");
            hidePreloader();
        }
    });

    // 点击链接触发加载动画
    $('a').on("click", function(e){
        const href = $(this).attr("href");
        // 过滤不需要跳转的链接，避免误触发加载动画
        if (
            !href 
            || href.startsWith("#") 
            || href.startsWith("javascript:")
            || $(this).attr("target") === "_blank"
            || e.isDefaultPrevented()
        ) {
            return;
        }
        $(".lm-preloader").removeClass('lm-hidden');
        $(".lm-preloader-number").html("Loading <span class='one'>.</span><span class='two'>.</span><span class='three'>.</span>");
        $(".lm-percent span:nth-child(2n)").hide();
    });
}(jQuery);

补充说明：如果页面还有其他触发页面跳转的逻辑（比如表单提交、JS手动跳转），只要保证pageshow事件里的重置逻辑存在，就不会再出现返回卡加载的问题。

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