Hello guys,
I have a few pages which have iframe. When I go to those pages on my app, It doesn’t load the website fast. It’s white blank for a couple of seconds before start loading a site.
I figured iframe is a little slow…
Is there any way to preload all these iframe website links on start so when a user navigates to the iframe page, they will see the site loaded without having to wait?
Let me know if there’s a way to make this happen.
Thanks,
If your App is a PWA you can use a Service Worker to cache URLs, for example:
"urls": [
"https://fonts.googleapis.com/**"
]
See: https://robferguson.org/blog/2018/04/16/0ptimising-the-performance-of-an-ionic-pwa-part-1/
Unfortunately, my app is not PWA.
Is there any way to preload a website on app init?
That’s probably the only way to bypass the white loading screen of iframe…
still haven’t found a good solution for this yet.
There’s a trick to completely hide iframe’s white flash screen but it doesn’t address loading time issue:
Interesting.
I know there an issue (white screen) on IOS when loading PWAs.
See: https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210
iframe ships with onload() function so it can be used along with Ionic’s loading controller.
http://www.dyn-web.com/tutorials/iframes/onload/
But I found sometimes it takes up to six seconds for an iframe page to load a site.
It depends on your internet connection but it’s definitely not that fast.
Here are a few other tricks: