Integrate page prefetching in $routeProvider

[mlegenhausen]

Problem:

1. Keeping all pages in a single HTML document is not practical for bigger applications.
2. Using $.mobile.page.prototype.options.domCache = true; results on heavy usage in the same result as 1.

Solution:
Use jqm page preloading.

Problem 2:
Does not work so well when using ng-click and changing the page via $location.path().

Solution 2:
Integrate the caching in the $routeProvider.

Example:

$routeProvider.when('/', {
   jqmOptions: {
      domCache: ['page1.html', 'page2.html']
   }
});

This should load the pages in the background after the route was changed successfully. This should also store the previous visited page so going back in the app is also as smooth as going forward.

What do you think?

[xliyong]

+1

[tbosch]

Hi,
you can do the following: Create a route with a resolve property that calls $.mobile.loadPage, e.g.

                    resolve: {
                        prefetchPages: function() {
                            $.mobile.loadPage( 'page2.html', { role: 'page' ,prefetch: true } );
                            return true;
                        }
                    }

Start chrome and open the dev tools, the load this plunk: http://plnkr.co/edit/zxhGwCx1OSdi9ObTmfKC?p=preview
You should see that page2.html is loaded in the background while visiting the first page. And when you click on the link for page2 there should be no new network request.

Hope this helps,
Tobias

[xliyong]

Hi,

I have some directives that manipulate DOM and they needs to read width/height of DOM elements during initialization. Preloaded pages always return 0 for width / height, which makes the directives not functioning at all.

Do you have any idea how I can prefetch pages and at the same time re-initialize directives before showing the page ?

I have tried listening to JQM event and reinitializing directives on pageshow event, but I believe there are better ways to do it.

[mlegenhausen]

The problem is the browser has never rendered the DOM element. You need to attach the elements to the DOM then they get a height. Maybe you can make a plnkr for this?

[sirair]

I use the solution of TBosch for my prefetching. But I have the problem that I prefetch all the 10 pages in my app and when I navigate from page1 to page2 the page1 is removed from the dom. So when I go back to page1, it will be loaded again.
How can I reach that all pages exist in the dom for all time?