安卓端Chrome可用但Firefox不可用的jQuery加载器问题求助

看起来你遇到了安卓Firefox下加载动画失效的问题，我帮你梳理下可能的原因和对应的修复方案：

你的代码里有几个容易在安卓Firefox中触发失效的点：

1. jQuery引用顺序错误 #

你把业务逻辑代码写在了jQuery引入之前——安卓Firefox对脚本加载顺序的校验更严格，当$(document).ready执行时，jQuery还没加载完成，整个逻辑根本跑不起来。

2. 链接点击未阻止默认行为 #

点击a.withloader时，浏览器会立刻执行跳转动作，安卓Firefox的页面跳转速度可能比Chrome快，导致加载动画还没来得及渲染就已经跳走了。

3. 加载器CSS不完整 #

你提供的loader样式是style="position: fixed; top:0; left...，样式截断不完整，很可能导致加载器在Firefox里要么看不到，要么被其他元素覆盖。

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 完善加载器的基础样式，确保在所有浏览器中正常显示 */
        #loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.9);
            z-index: 9999; /* 确保加载器在最上层 */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* 添加旋转动画 */
        #loader .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #e0e0e0;
            border-top-color: #2196F3;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 加载器元素 -->
    <div id="loader">
        <div class="spinner"></div>
    </div>

    <!-- 测试用表单 -->
    <form action="#">
        <button type="submit">提交表单</button>
    </form>

    <!-- 测试用带加载的链接 -->
    <a href="https://example.com" class="withloader">跳转链接</a>

    <!-- 先引入jQuery，再执行业务代码 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // 初始隐藏加载器
            $('#loader').hide();

            // 表单提交时显示加载器
            $('form').submit(function(event) {
                // 如果是异步提交表单，一定要阻止默认提交行为
                // event.preventDefault();
                $('#loader').show();
            });

            // 带加载器的链接点击事件
            $('a.withloader').click(function(event) {
                // 先阻止默认跳转，确保加载器能显示出来
                event.preventDefault();
                $('#loader').show();
                
                // 如果需要跳转，可在延迟后手动触发（模拟加载过程）
                const targetUrl = $(this).attr('href');
                setTimeout(() => {
                    window.location.href = targetUrl;
                }, 800);
            });
        });
    </script>
</body>
</html>

• 调整脚本顺序：把jQuery的引入放在业务代码之前，确保jQuery加载完成后再执行DOM操作，这是解决脚本未定义报错的核心。
• 阻止默认行为：给a标签的点击事件添加event.preventDefault()，避免页面立即跳转。如果需要跳转，可以在显示动画后手动触发。
• 完善加载器样式：补充完整的CSS，包括宽高、背景、层级（z-index）和动画效果，确保在所有浏览器中都能正确显示。
• 表单提交提示：如果是同步表单提交，浏览器会刷新页面，加载动画可能只会闪一下；如果是异步提交，一定要阻止默认提交行为才能看到完整的加载过程。

1. 打开安卓Firefox的开发者工具（菜单→Web开发者→调试器），查看控制台是否有报错（比如$ is not defined，这就是jQuery没加载的典型报错）。
2. 在开发者工具中查看#loader元素的实际样式，确认是否被其他CSS覆盖，或者是否有样式未生效。

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