How to pre-load (cache) an external page in jquery before redirecting to it?

Question

I am doing a phonegap app. I have an index.html page with a sign-in button that redirects to the website app.

When sign-in button was clicked, I wanted to have a loading gif to show while the page is being cached/pre-loaded and redirect to the page when its done.

I would appreciate a sample script code.

Answer 1

I'm not even sure you need to use any jQuery or Javascript unless you want to dynamically take care of many cases like this. You can look into HTML5 prefetch to preload and cache the next page after login. So in the head of your document add:

<link rel="prefetch" href="http://example-site/next_page_after_login.html" />

You can read more about this on David Walsh blog here, or read more on MDN prefetch MDN