fix: 改进 Flutter Web 加载指示器隐藏逻辑

使用五种方式确保加载指示器被正确隐藏:
- Flutter 第一帧渲染完成事件
- Flutter 引擎初始化检查
- 10秒超时保护
- 页面加载后检查 Flutter 视图
- 定期轮询检查 Flutter 视图

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-24 18:58:40 +08:00
parent 6bf54eb849
commit 4ad05770ed
4 changed files with 110 additions and 8 deletions

View File

@@ -103,15 +103,66 @@
<!-- 隐藏加载指示器 -->
<script>
window.addEventListener('flutter-first-frame', function() {
// 防止重复隐藏
var loadingHidden = false;
function hideLoading() {
if (loadingHidden) return;
loadingHidden = true;
var loading = document.getElementById('loading');
if (loading) {
loading.classList.add('loading-hidden');
loading.style.opacity = '0';
loading.style.transition = 'opacity 0.3s ease-out';
setTimeout(function() {
loading.remove();
if (loading && loading.parentNode) {
loading.parentNode.removeChild(loading);
}
}, 300);
}
}
// 方式1: Flutter 第一帧渲染完成(最可靠的方式)
window.addEventListener('flutter-first-frame', hideLoading);
// 方式2: 监听 Flutter 引擎初始化完成
if (window._flutter) {
window._flutter.loaderDidLoad = true;
}
// 方式3: 超时保护10秒后强制隐藏
var timeoutId = setTimeout(hideLoading, 10000);
// 方式4: 页面完全加载后检查5秒后
window.addEventListener('load', function() {
setTimeout(function() {
// 检查 Flutter 应用是否已渲染
var flutterView = document.querySelector('flutter-view') ||
document.querySelector('flt-glass-pane');
if (flutterView) {
hideLoading();
} else {
// 如果还没渲染再等3秒
setTimeout(hideLoading, 3000);
}
}, 5000);
});
// 方式5: 定期检查 Flutter 视图是否已存在
var checkInterval = setInterval(function() {
var flutterView = document.querySelector('flutter-view') ||
document.querySelector('flt-glass-pane');
if (flutterView && flutterView.offsetWidth > 0) {
clearInterval(checkInterval);
clearTimeout(timeoutId);
hideLoading();
}
}, 500);
// 15秒后清除检查间隔
setTimeout(function() {
clearInterval(checkInterval);
}, 15000);
</script>
<!-- vConsole 调试控制台 - 仅在开发环境启用 -->