PrimeFaces项目中jQuery/CSS无法持续显示忙碌光标问题求助

问题背景 #

基于PrimeFaces 10.0.0 + JSF 2.2.9开发项目，需求是在耗时较长的PrimeFaces Ajax事件触发时，将鼠标光标切换为忙碌状态。

已配置的实现方案 #

1. CSS样式定义：在项目CSS文件中添加全局忙碌光标样式

html.wait, html.wait * {
   cursor: wait !important;
}

2. Ajax组件绑定事件：在PrimeFaces Ajax组件中添加状态回调代码

onstart="$('html').addClass('wait');"
oncomplete="$('html').removeClass('wait');"

3. 尝试全局Ajax状态监听：给组件设置global="true"后，使用<p:ajaxStatus>统一处理所有Ajax事件

<p:ajaxStatus onstart="$('html').addClass('wait');" oncomplete="$('html').removeClass('wait');"/>

异常现象 #

• 首次运行时功能正常，但电脑登出再登录后，忙碌光标功能失效，期间无任何代码变更
• 多次登出登录后，仅少数（2次）会话内功能正常，正常时整个会话的所有Ajax事件均能触发光标切换
• 将项目复制到其他Eclipse环境首次运行正常，但登出后同样无法保证后续生效
• 测试<p:ajaxStatus>的start/complete facet能正常显示文本，说明PrimeFaces的Ajax状态监听逻辑正常，问题锁定在jQuery/CSS层面，最终发现浏览器未加载更新后的CSS文件

解决建议 #

1. 破除CSS缓存 #

浏览器缓存旧CSS文件是核心诱因，可通过以下方式强制加载最新CSS：

• 给CSS引用添加版本戳：在模板文件的样式表引用中加入版本参数，每次更新CSS后修改版本号，或使用动态时间戳（生产环境建议用固定版本号）

<h:outputStylesheet library="css" name="styles.css?v=1.1" />
<!-- 动态时间戳写法（开发环境用） -->
<h:outputStylesheet library="css" name="styles.css?v=#{system.currentTimeMillis()}" />

• 调整服务器缓存策略：在web.xml中配置静态资源的过期时间，避免浏览器长期缓存旧文件（以Tomcat为例）

<filter>
    <filter-name>ExpiresFilter</filter-name>
    <filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
    <init-param>
        <param-name>ExpiresByType text/css</param-name>
        <param-value>access plus 1 hour</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>ExpiresFilter</filter-name>
    <url-pattern>*.css</url-pattern>
</filter-mapping>

2. 绕开CSS缓存的替代方案 #

直接通过JavaScript动态修改光标样式，无需依赖CSS类，彻底避免缓存问题：

<p:ajaxStatus 
    onstart="$('html, html *').css('cursor', 'wait');" 
    oncomplete="$('html, html *').css('cursor', '');"
/>

或更严谨的原生JS写法（摆脱jQuery依赖）：

<p:ajaxStatus 
    onstart="document.documentElement.style.cursor = 'wait'; document.documentElement.style.setProperty('cursor', 'wait', 'important');" 
    oncomplete="document.documentElement.style.cursor = ''; document.documentElement.style.removeProperty('cursor');"
/>

3. 会话级资源加载排查 #

检查模板文件中CSS的引用是否依赖会话状态，确保每次新会话都能正确请求最新的CSS资源，而非复用缓存的旧副本。

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