Framework7+Phonegap应用：页面全资源加载后隐藏预加载器的有效事件

嘿，我太懂你的困扰了——在Framework7和Phonegap的混合开发环境里，要精准拿捏所有资源（包括动态渲染的图片、脚本）加载完成的时机，确实容易踩坑。你之前试的那些事件不管用，核心原因是它们要么只监听了页面框架的初始化，要么没覆盖到从JSON加载后动态插入的资源（比如你页面里的图片）。

给你两个适配场景的靠谱方案，按需选择就行：

方案1：追踪动态图片加载完成（最适配你的JSON渲染场景） #

因为你的页面内容是从服务器JSON动态生成的，初始DOM里并没有这些图片，所以window.load或DOMContentLoaded只会等页面静态资源加载，完全不会管后续动态插入的内容。这个方案会逐个监控所有图片的加载状态：

// 绑定Framework7的页面初始化事件
$$(document).on('page:init', '.page[data-name="your-target-page"]', function (e) {
  const currentPage = e.detail.page;
  // 先显示预加载器
  app.preloader.show();

  // 1. 发起请求加载服务器JSON数据
  $$.getJSON('your-server-api-address', function (responseData) {
    // 2. 把数据渲染成页面内容（示例：循环生成带图片的列表项）
    let renderedHtml = '';
    responseData.items.forEach(item => {
      renderedHtml += `<div class="list-item"><img src="${item.imgUrl}" alt="${item.title}"></div>`;
    });
    $$(currentPage.el).find('.page-content').html(renderedHtml);

    // 3. 监控所有图片的加载状态
    const pageImages = $$(currentPage.el).find('img');
    let loadedImageCount = 0;
    const totalImageCount = pageImages.length;

    // 如果页面没有图片，直接隐藏预加载器
    if (totalImageCount === 0) {
      app.preloader.hide();
      return;
    }

    // 给每张图片绑定加载/失败事件
    pageImages.each(function () {
      // 处理图片已缓存的情况
      if (this.complete) {
        loadedImageCount++;
        checkAllLoaded();
        return;
      }
      // 监听加载成功
      $$(this).on('load', function () {
        loadedImageCount++;
        checkAllLoaded();
      });
      // 监听加载失败（避免预加载器一直显示）
      $$(this).on('error', function () {
        loadedImageCount++;
        checkAllLoaded();
      });
    });

    // 判断所有图片是否加载完成
    function checkAllLoaded() {
      if (loadedImageCount === totalImageCount) {
        // 所有资源就绪，隐藏预加载器
        app.preloader.hide();
      }
    }
  });
});

方案2：结合Framework7页面事件与全局资源加载事件（适合静态资源较多的场景） #

如果你的页面除了动态JSON内容，还有不少静态脚本、图片，可以结合Framework7的页面进入完成事件和全局资源加载事件，确保双重条件满足后再隐藏预加载器：

let pageAnimationDone = false;
let allStaticResourcesLoaded = false;

// 监听Framework7页面进入并完成动画的事件
$$(document).on('page:afterIn', '.page[data-name="your-target-page"]', function () {
  pageAnimationDone = true;
  checkIfReady();
});

// 监听全局所有静态资源加载完成的事件
window.addEventListener('load', function () {
  allStaticResourcesLoaded = true;
  checkIfReady();
});

// 同时满足两个条件才隐藏预加载器
function checkIfReady() {
  if (pageAnimationDone && allStaticResourcesLoaded) {
    app.preloader.hide();
  }
}

为什么你之前的方法没生效？ #

• onPageInit()：触发时页面DOM刚初始化，动态内容还没开始加载，资源肯定没就绪。
• pageAfterAnimation：页面动画完成，但动态图片可能还在请求加载中。
• window.load：只监听初始页面的静态资源，不会追踪你从JSON加载后动态插入的图片。
• DOMContentLoaded：DOM结构加载完成就触发，完全不等待图片、脚本等资源加载。

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