Azure B2C自定义策略登录页CSS加载前无样式闪烁问题求助

问题背景 #

基于Azure B2C自定义策略开发登录应用，通过外部HTML页面自定义登录界面，相关配置如下：
自定义策略片段：

<ContentDefinition Id="api.something">
    <LoadUri>https://sienna.com/auth/index.html</LoadUri>
</ContentDefinition>

HTML资源引入：

<link class="mainStyles" rel="stylesheet" href="/src/css/index.scss" />
<script type="module" src="/src/js/index.js"></script>

页面加载时会短暂显示未应用CSS的无样式内容，尝试过setTimeout、DOMContentLoaded、window.load等触发方式显示容器，均无法解决0.5秒左右的闪烁问题，推测与Azure B2C的JavaScript执行时机有关。

解决方案 #

1. 直接监听CSS资源加载完成事件 #

通过监听CSS文件的onload事件，确保样式完全加载后再显示页面内容，这是最精准的方式：

• 给CSS链接标签添加唯一ID：

<link id="mainStyles" rel="stylesheet" href="/src/css/index.scss" />

• 在JS中监听加载完成事件：

const stylesheet = document.getElementById('mainStyles');

// CSS加载完成后显示内容
stylesheet.onload = function() {
  document.getElementById('mainWrapper').style.display = 'flex';
};

// 容错处理：避免CSS加载失败导致页面一直隐藏
stylesheet.onerror = function() {
  document.getElementById('mainWrapper').style.display = 'flex';
};

2. 内联初始隐藏样式（必加） #

为了避免JS加载延迟导致初始无样式内容闪现，在HTML头部添加内联CSS默认隐藏容器：

<head>
  <style>
    #mainWrapper {
      display: none !important;
    }
  </style>
  <!-- 其他资源引入 -->
</head>

这样即使JS还没执行，页面初始状态也是隐藏的，不会出现无样式内容。

3. 调整JS加载方式 #

由于type="module"的脚本会延迟执行，可能导致显示逻辑触发太晚，可尝试改用普通脚本加载：

<script src="/src/js/index.js"></script>

同时在JS中使用window.load事件兜底（确保所有资源包括图片等都加载完成）：

window.addEventListener('load', function() {
  document.getElementById('mainWrapper').style.display = 'flex';
});

原因说明 #

之前的方法失效，核心是Azure B2C会在页面加载过程中注入自身的脚本和内容，导致DOMContentLoaded或window.load事件的触发时机早于你的CSS资源加载完成；而type="module"脚本的执行优先级较低，无法及时拦截无样式内容的渲染。通过直接监听CSS加载事件+内联初始隐藏的组合，能绕过B2C的脚本干扰，精准控制显示时机。

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