fix: 改进 Flutter Web 加载指示器隐藏逻辑
使用五种方式确保加载指示器被正确隐藏: - Flutter 第一帧渲染完成事件 - Flutter 引擎初始化检查 - 10秒超时保护 - 页面加载后检查 Flutter 视图 - 定期轮询检查 Flutter 视图 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1 +1 @@
|
|||||||
cd059bcd8df9e9b2b7bfff5ee9fb7ba7
|
2b1d2ed877ca1d041aef5d6561fbfcf5
|
||||||
@@ -37,6 +37,6 @@ _flutter.buildConfig = {"engineRevision":"e4b8dca3f1b4ede4c30371002441c88c12187e
|
|||||||
|
|
||||||
_flutter.loader.load({
|
_flutter.loader.load({
|
||||||
serviceWorkerSettings: {
|
serviceWorkerSettings: {
|
||||||
serviceWorkerVersion: "1409326861" /* Flutter's service worker is deprecated and will be removed in a future Flutter release. */
|
serviceWorkerVersion: "1994875870" /* Flutter's service worker is deprecated and will be removed in a future Flutter release. */
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -103,15 +103,66 @@
|
|||||||
|
|
||||||
<!-- 隐藏加载指示器 -->
|
<!-- 隐藏加载指示器 -->
|
||||||
<script>
|
<script>
|
||||||
window.addEventListener('flutter-first-frame', function() {
|
// 防止重复隐藏
|
||||||
|
var loadingHidden = false;
|
||||||
|
|
||||||
|
function hideLoading() {
|
||||||
|
if (loadingHidden) return;
|
||||||
|
loadingHidden = true;
|
||||||
|
|
||||||
var loading = document.getElementById('loading');
|
var loading = document.getElementById('loading');
|
||||||
if (loading) {
|
if (loading) {
|
||||||
loading.classList.add('loading-hidden');
|
loading.style.opacity = '0';
|
||||||
|
loading.style.transition = 'opacity 0.3s ease-out';
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
loading.remove();
|
if (loading && loading.parentNode) {
|
||||||
|
loading.parentNode.removeChild(loading);
|
||||||
|
}
|
||||||
}, 300);
|
}, 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>
|
</script>
|
||||||
|
|
||||||
<!-- vConsole 调试控制台 - 仅在开发环境启用 -->
|
<!-- vConsole 调试控制台 - 仅在开发环境启用 -->
|
||||||
|
|||||||
@@ -103,15 +103,66 @@
|
|||||||
|
|
||||||
<!-- 隐藏加载指示器 -->
|
<!-- 隐藏加载指示器 -->
|
||||||
<script>
|
<script>
|
||||||
window.addEventListener('flutter-first-frame', function() {
|
// 防止重复隐藏
|
||||||
|
var loadingHidden = false;
|
||||||
|
|
||||||
|
function hideLoading() {
|
||||||
|
if (loadingHidden) return;
|
||||||
|
loadingHidden = true;
|
||||||
|
|
||||||
var loading = document.getElementById('loading');
|
var loading = document.getElementById('loading');
|
||||||
if (loading) {
|
if (loading) {
|
||||||
loading.classList.add('loading-hidden');
|
loading.style.opacity = '0';
|
||||||
|
loading.style.transition = 'opacity 0.3s ease-out';
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
loading.remove();
|
if (loading && loading.parentNode) {
|
||||||
|
loading.parentNode.removeChild(loading);
|
||||||
|
}
|
||||||
}, 300);
|
}, 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>
|
</script>
|
||||||
|
|
||||||
<!-- vConsole 调试控制台 - 仅在开发环境启用 -->
|
<!-- vConsole 调试控制台 - 仅在开发环境启用 -->
|
||||||
|
|||||||
Reference in New Issue
Block a user