Framework7页面加载时显示/隐藏全局预加载器问题求助

你遇到的问题主要有两个核心原因：一是Framework7默认的app.preloader.show()生成的预加载器是内嵌式的，并非全屏覆盖所有内容的遮罩；二是你监听的pageInit事件是单页应用内部页面切换的初始化事件，并不对应浏览器地址栏加载页面时的全资源加载完成时机。

下面是实现你需求的完整方案：

1. 添加全屏预加载器的HTML与样式 #

首先我们需要自定义一个全屏遮罩层的预加载器，确保它能覆盖页面所有内容：

HTML 代码 #

<!-- 放在<body>的最顶部，确保最先渲染 -->
<div class="fullscreen-preloader" id="fullscreen-preloader">
  <div class="preloader"></div>
</div>

<!-- 你的Framework7应用根元素 -->
<div id="app">
  <!-- 应用内容... -->
</div>

CSS 代码 #

/* 全屏遮罩层 */
.fullscreen-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.95); /* 自定义背景色，建议和页面主色调匹配 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* 确保层级最高，不会被其他元素遮挡 */
  transition: opacity 0.3s ease; /* 添加平滑隐藏过渡 */
}

/* 预加载动画（可以用Framework7默认样式，也可以自定义） */
.preloader {
  width: 44px;
  height: 44px;
  border: 4px solid #f0f0f0;
  border-top-color: #2196f3; /* 自定义加载动画的颜色 */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 隐藏状态的样式 */
.fullscreen-preloader.hidden {
  opacity: 0;
  pointer-events: none; /* 隐藏后不再阻挡页面交互 */
}

2. 修改JavaScript逻辑 #

我们需要在页面开始加载时显示预加载器，然后监听浏览器全资源加载完成的事件（包括图片、样式、脚本等），再隐藏预加载器：

var app = new Framework7({
  root: '#app',
  name: 'My App',
  id: 'com.myapp.test',
  on: {
    init: function () {
      console.log('App initialized');
    },
  }
});

var mainView = app.views.create('.view-main');

// 页面开始加载时显示全屏预加载器
const preloader = document.getElementById('fullscreen-preloader');
preloader.style.display = 'flex';

// 监听整个页面所有资源加载完成的事件
window.addEventListener('load', function() {
  // 添加隐藏类实现平滑过渡
  preloader.classList.add('hidden');
  // 延迟移除DOM元素，避免过渡动画被打断
  setTimeout(() => {
    preloader.remove();
  }, 300);
});

关键说明 #

• 为什么不用app.preloader.show()？
  Framework7的内置预加载器是为单页应用内部的局部加载场景设计的，默认会附加到当前活跃的页面容器中，无法实现全屏覆盖的效果，所以我们需要自定义全屏遮罩。
• 为什么不用pageInit事件？
  pageInit是Framework7单页应用中，内部路由切换时触发的页面初始化事件，它只会在框架初始化页面结构时触发，并不代表浏览器已经加载完所有页面资源（比如图片、字体），所以用window.load事件才能准确对应“页面加载完成”的时机。

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