Показать/скрыть предварительный загрузчик при загрузке страницы в Framework7

Я хочу показать preloader над всем содержимым, когда страница загружается и скрыть ее, когда загрузка страницы завершена, и показать содержимое (я не говорю о внутреннем links-, например, когда вы вводите адрес в браузере и ожидаете для загрузки страницы.) Подобно этой демонстрации: https://demo.app-framework.com/

Я попробовал это:

var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',

    on: {
        init: function () {
            console.log('App initialized');
        },
        pageInit: function () {
            console.log('Page initialized');
            app.preloader.hide();
        },
    }
  // ... other parameters
});

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

Но он не работает, он показывает загрузчика, как и другие элементы, и не скрывает его, я не уверен, что это возможно. Буду признателен, если кто-то может указать мне в правильном направлении.

Ответ 1

Это потому, что в событии pageInit вы ссылаетесь на переменную, которая не инициализируется к тому времени, когда вы вызываете (var app), найдите полезный фрагмент кода.

var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',

    on: {
        init: function () {
            console.log('App initialized');
        },
        pageInit: function () {
            console.log('Page initialized');
            //app.preloader.hide(); //app is not yet initialized this will return an undefined error.
        },
    }
  // ... other parameters
});

var mainView = app.views.create('.view-main');
app.preloader.show(); //var app is initialized by now
app.on('pageInit', function (page) {
  console.log('Page is now initialized');
  app.preloader.hide();
});

Ответ 2

Документы на странице содержат раздел о событиях страницы. https://framework7.io/docs/page.html#page-name

Используйте app.preloader.show(); на раннем событии, и используйте app.preloader.hide(); когда вы хотите его удалить.

    pageBeforeIn: function (e, page) {
        app.preloader.show();
    },
    pageAfterIn: function (e, page) {
        app.preloader.hide();
    },