javascript - Showhide preloader on page load in Framework7 - Stack Overflow

admin管理员组

文章数量:1343462

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: /

I’ve tried this:

var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'My App',
  // App id
  id: '.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.

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./

I’ve tried this:

var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'My App',
  // App id
  id: '.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.

• javascript
• html-framework-7

Share Improve this question Follow edited May 18, 2018 at 13:16 SamAct 53944 silver badges2424 bronze badges asked May 18, 2018 at 12:17 hretichretic 1,11599 gold badges4343 silver badges8888 bronze badges 4

• is this F7 V2? you need to display loader when every new pages are loading and hide it once loading is plete. – prasanna puttaswamy Commented May 22, 2018 at 5:02
• @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 / plete ? – hretic Commented May 22, 2018 at 17:05
• you need this only for index page or for all page redirects – prasanna puttaswamy Commented May 28, 2018 at 5:25
• @prasannaputtaswamy all pages – hretic Commented May 28, 2018 at 13:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5 +50

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

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

本文标签： javascriptShowhide preloader on page load in Framework7Stack Overflow