Show / hide preloader on page load in Framework7

Question

I want to show a preloader over all the contents when a page is loading and hide it when the page load is finished and show the content (I'm not talking about internal links- like when you type an address in the browser and waiting for the page to load.) Like this demo: https://demo.app-framework.com/

I’ve tried this:

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();

But it doesn't work it shows the loader like other elements and doesn't hide it, I'm not sure if its something possible. I would appreciate if someone can point me in the right direction.

Foreigner

is this F7 V2? you need to display loader when every new pages are loading and hide it once loading is complete. – Archil

@prasannaputtaswamy yes v2 , my problem is i dont know how to realize when page is loading and when page load is done ... what is the method for page load start / complete ? – Foreigner

you need this only for index page or for all page redirects – Archil

@prasannaputtaswamy all pages – Foreigner

Answer 1

That's because in the pageInit event you are referring to a variable which is not initialised by the time you are calling (var app), please find the code snippet usefull.

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();
});

Reremouse

Answer 2

The docs on Page has a section on Page Events. https://framework7.io/docs/page.html#page-name

Use app.preloader.show(); on an early event, and use app.preloader.hide(); when you want it removed.

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

Poff