Flutter Web加载完成后隐藏启动页需监听什么JavaScript事件

window.onload仅会在页面静态资源（包括main.dart.js文件本身）下载完成时触发，此时Flutter引擎还未完成初始化、Dart业务代码还在执行、应用首帧也未渲染，因此会提前触发不符合需求，你可以使用以下两种官方支持的方案实现需求：

方案1：修改Flutter加载器链式回调（最稳定，推荐） #

Flutter 2.0及以上版本的index.html默认使用官方提供的_flutter.loader加载流程，你可以在runApp执行完成的回调中处理加载指示器的移除：

window.addEventListener('load', function(ev) {
  _flutter.loader.loadEntrypoint({
    serviceWorker: {
      serviceWorkerVersion: serviceWorkerVersion,
    }
  })
  .then(function(engineInitializer) {
    return engineInitializer.initializeEngine();
  })
  .then(function(appRunner) {
    return appRunner.runApp();
  })
  .then(function() {
    // 此时Flutter应用首帧已渲染完成，可安全移除加载指示器
    const spinner = document.querySelector('.spinner');
    if (spinner) spinner.remove();
  });
});

方案2：监听Flutter全局自定义事件 #

如果你不想修改默认的加载流程代码，可以直接监听Flutter初始化完成后自动触发的flutter:app-initialized全局事件：

// 直接写在index.html的任意<script>标签中即可
window.addEventListener('flutter:app-initialized', () => {
  const spinner = document.querySelector('.spinner');
  if (spinner) spinner.remove();
});

该事件的触发时机和方案1完全一致，都是在Flutter应用首帧渲染完成后触发。

兼容低版本Flutter（1.x版本）的方案 #

如果你使用的是不支持上述特性的旧版Flutter，可以通过监听Flutter渲染根元素插入DOM的时机实现：

const observer = new MutationObserver((mutations) => {
  // Flutter渲染的根元素标签为flt-glass-pane，该元素插入页面代表首帧已渲染
  if (document.querySelector('flt-glass-pane')) {
    const spinner = document.querySelector('.spinner');
    if (spinner) spinner.remove();
    observer.disconnect();
  }
});
// 监听body下的DOM节点变化
observer.observe(document.body, { childList: true, subtree: true });

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