Forum | Appery.io

I'd like to speed up page transitions by using jQuery prefetch
$.mobile.loadPage( pageUrl, { showLoadMsg: false } );

Is that possible?

You should be able to run any jQuery Mobile code. You just need to get the page URL. Look in the source, you will see code like this:

code
Tiggr.AppPages = [
new pageItem('mobilescreen1', 'screen-6C13.html'), new pageItem('current', 'screen-6C13.html')];
/code

That's where you get the page URL. We are working on keeping the page names as you name them.

If I can barge in

So does this mean if I for example have 3 screens

Body part
Condition
Medicine

all 3 have a list that is beeing fetched from rest server

for example Body part has rest service that fetches body parts (Head, Neck, Hands...) when you click on one of those you get list of conditions for that body part like Head ache, Ear ache and so on. And in last list you get the medicines that help for that condition.

How would I find list of pages for that so they can be preloaded.

The goal is to have the resource once synced with the server to use as offline application.

In simple terms I need a crawler that would crawl all the pages and save json responses in a database or localstorage.

Or is there some other approach to achive that?

What you described above is possible, but would have to be developed. The end result is just a standard HTML, jQuery Mobile app. Tiggzi is an app builder, so if you can build this app outside of Tiggzi, you can build it in Tiggzi. You can get the page names the same way I described above. Someone would still have to implement the logic you describe: fetching data, saving data into Local Storage, syncing, etc.

I be interested to hear if anyone else has tried the prefetch. I was able to figure out the html names by going in, and inspecting the content of each html file, but when I implemented the prefetch in javascript code the buttons on my screen acted unpredictably, and often would do nothing, getting me stuck on the page.

Hi guys,

I have tried to speed up the app by prefetching. Currently, the screen "flickers" when transitioning from one page to the next - the default grey container color is shown for a short while before my background color loads, and the grids are not aligned for a short while before they become aligned. Below is the code I use for preload.
code $.mobile.loadPage("signIn.html", {showLoadMsg: false});/code

Things I have tried:

1. prefetch the next page on Before Load event
   No difference.

2. prefetch the current page on Before Load event
   No difference.

3. timeout on Before Load event
   code setTimeout(function(){},3000); /code
   I did this thinking that it would give more time for the page to load. Tried it with and without prefetching. Still does not work

4. On button click, invoke javascript to prefetch next page.
   Does not work. Tried it with and without the timeout.

Hi Yan, are there any JS errors in browser console http://docs.appery.io/documentation/d...?

Hi Alena, no there aren't any JS errors. Not sure what went wrong.

Hi,

To prefetch certain page please use next code:

pre
code
//Replace pageName with your one.
var pageName = "Screen1&quot
var fullPage = document.location.pathname.replace(/\/[\/]+$/gi, "") + "/" + pageName + ".html&quot
$.mobile.loadPage(fullPage, {showLoadMsg: false});
/code
/pre

To change page you can use code next code:
pre
navigateTo("yourScreen");
/pre

Hi Yan,
I hope you don't mind me asking,
did the prefetch code work for you?