Preloading Content
From NimbleKit
[edit] From version 1.6.1 of NimbleKit
You can use the NKStartPreloadingPage(pageName) function - eg:
<script type="text/javascript"> NKStartPreloadingPage(page2.html) // Preload page2.html </script>
[edit] Best practice of using page preloading
NimbleKit waits for the first page to be fully loaded before it will show it. However all other pages will first appear white and user will be able to see how that page is loading. To avoid that we can first preload page and then show it, however many problems will appear, for example let's assume you have an application where every page uses navigation controller and set's it's properties (like title, color, etc). If on the main page we will start preload then all that pages will start changing parameters of current navigation controller, which is not good. Investigation shows that most of the time application spends on loading custom js files (like jquery, etc) and html content, actual NK functions and methods take much less time. So to preload pages in proper way and avoid white screens we need to preload only html content and execute NK functions in onPageShown() callback.
[edit] To implement a basic preloader:
This works by waiting for the pages content to load - once loaded fully, the content div becomes visible and the spinning loading indicator is removed.
In your pages Head section:
<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<script type="text/javascript" src="NKit.js"></script>
<script type="text/javascript">
// Loading Start
var loader = new NKActivityIndicator();
loader.init(145,160,30,'grey');
loader.show();
loader.spin();
// Loading Finished Function
function loaderFinished()
{
document.getElementById('content').style.visibility = 'visible';
loader.stop();
loader.hide();
}
</script>
</head>
And for your pages body: <body onload="loaderFinished();">
<div id="content" style="visibility: hidden;">
This is the div that surrounds the HTML code of your entire page, which contains your whole page layout,
which can take a while to render, so you hide it first.
</div>
</body>
</html>
