fix: 改进 Flutter Web 加载指示器隐藏逻辑
使用五种方式确保加载指示器被正确隐藏: - Flutter 第一帧渲染完成事件 - Flutter 引擎初始化检查 - 10秒超时保护 - 页面加载后检查 Flutter 视图 - 定期轮询检查 Flutter 视图 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -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 调试控制台 - 仅在开发环境启用 -->
|
||||
|
||||
Reference in New Issue
Block a user