Hello everyone,
the title says it all, I’m exploring IONIC 3.5 and ofcourse lazy-loading seems promising but when I tried it with simple HTML content the lazy-loaded page animation was lagging on the init call,
then it just runs smoothly after it has loaded yet I have no pipes and no code,
so my concern is if with a very lightweight page I got this problem then how would it be with larger pages with code and logic
should I refrain from using lazyload for the current time?
any ideas on that would be helpful.
Show us how exactly you implemented lazy loading, something seems amiss.
How did you create the project?
How did you build the app?
How are you testing?
Post your ionic info as well please.
Hi,
ionic info below:
global packages:
@ionic/cli-utils : 1.5.0
Cordova CLI : 6.4.0
Ionic CLI : 3.5.0
local packages:
@ionic/app-scripts : 1.3.12
@ionic/cli-plugin-cordova : 1.4.1
@ionic/cli-plugin-ionic-angular : 1.3.2
Cordova Platforms : android 6.0.0 ios 4.3.1
Ionic Framework : ionic-angular 3.5.0
System:
Node : v7.1.0
OS : macOS Sierra
Xcode : Xcode 8.3.2 Build version 8E2002
ios-deploy : 1.9.0
ios-sim : 5.0.11
npm : 3.10.9
App is available on ionic view id : b7c92903
example of lag : click on “PARA GONDER” or “PARA ISTE” options, it will lag at first, then on the second try it will be more smooth
I created the project using CLI as explained in the docs : ionic start myApp sidemenu
I also generated my pages using CLI : ionic g page home
I also used the CLI to generate Components : ionic g component search-box
I’m lazy-loading all of them by removing all the declarations from app.module.ts
and navigating to pages using String instead of an object as in the screenshots included here
how did I build the app: ionic Cordova run android (while device connected)
how did I test : I used Ionic View on both android device and IOS device, I also tried running directly on the device with run android, and ofcourse I tested on the browser, the problem exists in all my tests.
Ionic View performance is not really indicative for real app performance - so this is hard to compare.
Use --prod in the command to build/run your app on the real device.
This should be upgraded to current versions: cordova 7.0.1, cordova-android 6.2.3 and cordova-ios 4.4.1 (I think - whatever (7.01) will install
I updated to latest versions,
global packages:
@ionic/cli-utils : 1.5.0
Cordova CLI : 7.0.1
Ionic CLI : 3.5.0
local packages:
@ionic/app-scripts : 1.3.12
@ionic/cli-plugin-cordova : 1.4.1
@ionic/cli-plugin-ionic-angular : 1.3.2
Cordova Platforms : android 6.2.3 ios 4.3.1
Ionic Framework : ionic-angular 3.5.0
System:
Node : v8.1.4
OS : macOS Sierra
Xcode : Xcode 8.3.2 Build version 8E2002
ios-deploy : 1.9.0
ios-sim : 5.0.11
npm : 5.0.3
and did few more tests, in general I got a little bit better results, still there the same situation persisted,
I could track it down to a custom component I’m using inside the page, which is a list that had images in it,
I changed that to this
> <ion-item class="avatar-list-item">
> <ion-thumbnail item-start>
> <ion-img src="assets/img/{{user.photo}}"></ion-img>
> </ion-thumbnail>
> <h2>{{user.name}}</h2>
> <button ion-button clear class="phone" item-end>
> {{user.phone}}
> <ion-img src="assets/img/phone.png"></ion-img>
> </button>
> </ion-item>
Yet it is still making a little bit of a lag, even in browser, the images are causing it, but I don’t know why.
Are they maybe really big and unoptimized?
1 Like
Finally, Yes
you were totally right, some of the images were unoptimized which I did not notice before I check,
I did now compress them and that gave a huge difference.
Thank you.
1 Like
Sometimes it’s the simple things 