enter image description hereI am using ionic 4 so i need to a loader untill the page loaded completely. Now i am using loadingController and dismiss it when api res, loading finished but images still loading. I want loading untill all loading finished.
Like ionic 3 ionViewDidLoad() works
Below is the Answer i found on Ionic Documentation an event called ionImgWillLoad but dont know how to use it.
Ionic 4 relies more on Angular lifecycle hooks and instead of ionViewDidLoad you should now use ngAfterViewInit hook.
View initialization means views’ layout and rendering of components has been finished, but images async loading can still be ongoing.
ionViewDidLoad in Ionic 3 was also not awaiting for images to load. To have such a "hook" one needs to to custom implementation.
In typescript something like the below would do the trick:
counter: number;
maxImagesCount: number = document.images.length;
updateCounter() {
this.counter++;
if ( this.counter === this.maxImagesCount ) {
console.log( 'All images loaded!' );
}
}
In the template you could attach load event listener to images templates:
<img src="url" (load)="updateCounter()">
The closest to ionViewDidLoad is probably ionViewDidEnter. See the life cycle events below:
Related
We have an Ionic5-Angular app that is also being deployed as a web app. It’s nice that Ionic lazy loads all of its components - it greatly reduces the bundle size. However, we’re running into issues when it comes to user interactions that trigger lazy-loaded components.
As an example, we have a button that triggers a Dialog. When deployed, there is a noticeable delay between tapping the button and the dialog being displayed. When tested on a slow 2G internet connection, it took nearly a minute for the dialog to display. Once it has loaded once everything is fine but we are finding that the more impatient users are tapping the button several times because it looks broken.
I want the web browser to download the Ionic component together in advance while downloading the web page not when it’s requested.
I don't think you can preload individual components, but you can preload modules. Use Angular's PreloadAllModules like this:
import { RouterModule, PreloadAllModules } from '#angular/router';
...
RouterModule.forRoot(
appRoutes,
{
preloadingStrategy: PreloadAllModules
}
)
I am creating a function that calculates a page loading time for each page of my Ionic 3 App (I use lazy loading). However, I am currently stuck in issues:
When does the page start creating HTML?
When does the page finish creating HTML?
When does the page complete downloading all resources on the page (image, etc …)?
Can anyone give me advice?
One thing to look at is https://blog.ionicframework.com/navigating-lifecycle-events/ this contains the ionic life-cycle eg. ionViewDidLoad(): Fired only when a view is stored in memory. This event is NOT fired on entering a view that is already cached. It’s a nice place for init related tasks.
Ionic 3's pages are also angular components so I'd imagine the another thing to look at is the component hooks. These methods are fired when in the stages of the component life cycle.
https://angular.io/guide/lifecycle-hooks
https://www.intertech.com/Blog/angular-component-lifecycle/
eg. ngAfterViewInit(){ stopTimer() } //this method is fired once Angular initializes component and child component content
To achive what you want you could have a provider that both pages link to. When you change page start a timer and stop it using ngAfterViewInit() or other more appropriate hook.
I have a simple Ionic v1 app that displays a list of items. Clicking on an item navigates the user to a new view displaying info about the item.
If the user selects a second before the first item is loaded, the app will navigate to both views respectively, which is an issue.
Is there a way to prevent this via an ionic config or angular?
Note I am using Ionic Native Transitions, but this issue seems to be independent
*Edit * I know I can use something like a 'loading' modal to prevent clicks, but then I'll have to do this for every single list in the application that loads data, so that doesn't sound ideal
I ended up utilizing inoicNativeTransition.beforeTransition in order to render a modal-style backdrop that prevents users from clicking for 300ms
$rootScope.$on('ionicNativeTransitions.beforeTransition', function(){
$rootScope.stateTransitioning = true;
$timeout(function(){
$rootScope.stateTransitioning = false;
}, 300)
});
HTML
<div ng-show="stateTransitioning === true" id="inivisible-backdrop"> </div>
I don't hide the backdrop on the success of the transition, because there seems to be an inconsistent lag between when the view is changed and the transition is marked as 'successful'. 300ms seems to work just fine
I'm developing a PWA on ionic 3 with Angular 4 and I've failed multiple times trying to make a nice UI that show's in-app notifications about events.
I have a NotificationsService that is responsable for everything that has to do with getting the notification from Firebase.
My initial approach was to define a UI component (a.k.a notification-box) which would observe a property in the Notification Service and consume the notification provided by the service and display them nicely on top of the screen.
This sounds all nice and good but I created this component and had 3 issues:
Ionic 3 doesn't allow (AFAIK) a component to be 'global' and present in all app pages.
Including the tag of my component <notification-box></notification-box> on top of every page it's not a very good idea because components get instantiated and destroyed multiple times making it difficult to keep Subscriptions to the Observable notification property in the Service, and this could lead to a notification not arriving in between switching of pages.
If a notification where to arrive with a modal open, the notification would display behind the modal and my intent is to show notifications always on top.
I ended up using ToastController from ionic-angular which always displays on top no matter what (although it's a bit ugly and I want to switch to something like angular2-notifications).
How did Ionic achieve this "always on top" behaviour? Is there any way I can replicate that with a class of my own or Extend the ToastCtrl?
You can achieve what you want via provider and yes you will still need to inject such provider into every page that you want to see notifications in. You don't need to modify those pages' view (html templates) though.
I had similar need (to present "toast" inside of the app regardless of pages).
I solved this by making this provider a singleton provider (means we declare it at the app.module.ts in providers section) that is injected into every page (import and add to constructor):
import { Injectable } from '#angular/core';
import { ToastController } from 'ionic-angular'
#Injectable()
export class Toaster {
constructor (private toastCtrl: ToastController) {
}
presentToast(message, position, cssclass) {
let toast = this.toastCtrl.create({
message: message,
closeButtonText: "OK",
showCloseButton: true,
cssClass: cssclass,
position: position
});
toast.present();
}
presentSimpleToast(message, position) {
let toast = this.toastCtrl.create({
message: message,
duration: 3000,
position: position
});
toast.present();
}
}
I found an interesting bug that I can not replicate, but think someone here could provide some insight.
I have an activity that for now is partially native, partially web-based. By that I mean one element is simply a WebView until implementation on a native level can be achieved.
When I made a change in the page I am loading, I saw an immediate change using Chrome Developer Tools in a mobile interface. However, I was unable to immediately see the change in my WebView in my MainApp. As a test, I installed a new app that loaded the page in a WebView where I saw the changes. After clearing the data in my MainApp, I was able to see said changes.
I made a few more changes, but now these are being reflected immediately in my WebView (upon backing out of the activity and re-entering).
These are my WebView settings, can you see a reason for me not initially seeing these changes? I'm not very savvy (yet :) ) when dealing with how data is stored in a WebView and want to ensure that updates I make to my webpage are reflected immediately in the app. Thank you!
// Initialize WebView
if (Build.VERSION.SDK_INT >= 19)
mWebView.setWebContentsDebuggingEnabled(false);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
// Hide ProgressBar
mProgressBar.setVisibility(View.GONE);
}
});
final ActionBarActivity activity = this;
mWebView.setWebChromeClient(new WebChromeClient() {
public void onProgressChanged(WebView view, int progress) {
// Activities and WebViews measure progress with different scales.
// The progress meter will automatically disappear when we reach 100%
mProgressBar.setProgress(progress);
}
});
// Settings for WebView data
WebSettings ws = mWebView.getSettings();
ws.setSaveFormData(false);
ws.setSavePassword(false); // Not needed for API level 18 or greater (deprecated)
You probably need to disable the cache for your webview. When your data changes you need to reload the webview using mWebView.reload()
In case if you want to reload the the webview every time when you reopen.
use this setting for webview
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
This will not load the cache and the requirement will get fulfilled.