Big HTML pages take way to much time to load for the first time

Ionic Framework ionic-v3
1

Hi people!

I’m creating an app in which I have multiple pages with over 1000+ lines of HTML code. I have few with 10000 lines or so.

I used LazyLoading so that app is initialising pretty fast. But when I enter those pages I have a lag. The app stalls and take like 10-20 seconds to navigate to those pages.

I tried to use “priority” for the pages, but If I do that I have a lag on the app initialisation - so this is not a solution for me.

IonicModule.forRoot(MyApp, {
      preloadModules: true
    })

I’m pretty sure the issue is due to my large HTML file, but I see that even if I ngIf to “false” the elements inside the page, there’s no improvement.

Is there a solution for big HTML pages in Ionic? I’m sure others are dealing with this issue.

Thanks!

1 Like
2

Hi , use load on scroll ,
InfiniteScroll : https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/

1 Like
3

Thanks!

I see that InfiniteScroll requires a list to parse when scrolling. Is this still doable without having something to parse iteratively? I have HTML code which cannot be simply put in lists as this: (this is the code from the Ionic Docs).

items = [];

  constructor() {
    for (let i = 0; i < 30; i++) {
      this.items.push( this.items.length );
    }
  }

  doInfinite(infiniteScroll) {
    console.log('Begin async operation');

    setTimeout(() => {
      for (let i = 0; i < 30; i++) {
        this.items.push( this.items.length );
      }

      console.log('Async operation has ended');
      infiniteScroll.complete();
    }, 500);
  }
4

Hi @emanuelmoldovan ,

I do not know the details of your project, but …
…if you have HTML files with 10000 lines, you might have to consider changing the UI of your application.
Can you divide the content of these pages into different sub-pages?

Should the user make a lot of scroll?

I know it is not the solution but maybe can help you.

1 Like
5

Hi @ramon!

Yes - I have (big) sections that need to be expanded or hidden in this “big” page (form). I’m thinking of treating those sections as sub-pages…

Is there any link that you know of that it will be a short example? I really appreciate it!

Thanks!

6

If all the content of the 10000 lines page is a form, the solution will be more complicated.

At this time I have no example to share with you.

Sorry and good luck!

1 Like