Oracle APEX如何实现所有组件加载完成后再显示页面

以下方案可以实现和原生Page Designer完全一致的「加载完成前不展示业务内容、所有组件初始化完成后统一渲染」的效果，同时解决区域显示选择器（RDS）非激活区域、隐藏字段提前暴露的问题：

1. 配置全局预加载遮罩（核心方案，和APEX设计器逻辑一致） #

• 打开页面属性，找到「HTML > 正文内容（开头）」配置项，粘贴以下代码，保证页面加载时最先渲染加载遮罩：

<div class="apex-preloader-mask">
    <span class="a-Icon a-Icon--spinner" aria-hidden="true"></span>
</div>

• 找到页面属性「CSS > 内联CSS」配置项，粘贴以下初始样式，保证页面主体在初始化完成前完全不可见：

/* 页面主体初始隐藏 */
#t_PageBody {
    visibility: hidden !important;
}
/* 预加载遮罩样式，和APEX原生加载效果对齐 */
.apex-preloader-mask {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.apex-preloader-mask .a-Icon--spinner {
    width: 48px;
    height: 48px;
    color: #0572ce;
    animation: a-spin 1s linear infinite;
}

• 找到页面属性「JavaScript > 函数和全局变量声明」配置项，粘贴以下事件绑定逻辑，等所有APEX组件初始化完成后再隐藏遮罩、显示页面内容：

// 绑定APEX原生组件就绪事件，和Page Designer使用的触发时机完全一致
apex.jQuery(document).on('apexafterready', function() {
    // 淡入淡出移除遮罩，避免生硬切换
    apex.jQuery('.apex-preloader-mask').fadeOut(200, function() {
        apex.jQuery(this).remove();
    });
    // 显示页面主体
    apex.jQuery('#t_PageBody').css('visibility', 'visible');
});

如果页面包含大量图片、延迟加载组件，可以把监听事件从apexafterready换成apexwindowload，等所有静态资源加载完成后再显示内容。

2. 针对区域显示选择器（RDS）提前显示问题的专项修复 #

RDS组件的显示切换逻辑是JS初始化完成后才生效的，所以要提前用CSS隐藏非默认激活的标签页，避免初始化前闪烁：

• 先给RDS组件、所有归属RDS的非默认显示区域设置静态ID
• 在内联CSS中追加以下规则，提前隐藏非默认激活区域：

/* 将下面的#my_rds替换为你的RDS组件静态ID */
#my_rds .t-Tabs-panel:not(.is-active) {
    display: none !important;
}

RDS初始化完成后，自带的切换逻辑会自动覆盖这个CSS规则，不影响正常的标签切换功能。

3. 针对隐藏字段初始闪烁问题的专项修复 #

不要只靠动态操作、服务端配置控制字段隐藏，要提前用CSS把需要隐藏的字段在初始渲染阶段就藏起来：

• 给所有需要默认隐藏的页面项追加CSS类u-hidden（APEX自带的工具类，直接用即可）
• 如果有特殊隐藏逻辑，也可以直接在内联CSS中写规则提前隐藏：

/* 将下面的P1_FIELD1、P1_FIELD2替换为你需要默认隐藏的页面项ID */
#P1_FIELD1, #P1_FIELD2 {
    display: none !important;
}

不要用visibility: hidden隐藏字段，会保留占位空间，display: none不会留下空白布局。

4. 动态操作配置优化 #

当前在页面加载DA中配置的JS校验逻辑，做以下调整避免阻塞组件初始化：

• 将DA的触发事件从Page Load调整为Page Load (after components)，保证RDS、表单等组件初始化完成后再执行校验逻辑
• 把DA的执行序列调到100以后，不要用最高优先级抢占组件初始化的资源

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