StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Intro</h2> <p>Before we can talk about page events we need to talk about jQuery Mobile page architecture. jQuery Mobile applications can be created in two different ways, multi-page template or several <strong>HTML</strong> pages.</p> <h2>Different jQuery Mobile page architectures</h2> <h3>Multi-page template</h3> <p>In this kind of template everything is loaded into the <strong><code>DOM</code></strong>. No matter how many times user transitions from one page to another previous page will stay loaded into the <strong><code>DOM</code></strong>. While this is the best solution for smooth transition between pages it can burden the <strong><code>DOM</code></strong>. This is usually not a problem on desktop browsers but mobile browsers can suffer, particularly on a low end devices.</p> <h3>Multi HTML template</h3> <p>This template solution requires several <strong><code>HTML</code></strong> pages. It is an excellent option for large mobile app construction but there's a catch. Unlike multi-page template each time page is visited it will loaded into the <strong><code>DOM</code></strong>. On slower devices it can cause transition problems particularly if destination page is a large one. This can be solved with page prefetching where jQuery Mobile loads the target page in the background after the primary page has loaded and the <strong><code>pagecreate</code></strong> event has triggered. <strong><code>BUT</code></strong> there's another large problem and this is not sufficiently described in jQuery Mobile documentation. During the page transition previous page is going to be removed from the <strong><code>DOM</code></strong>. This is done to prevent content accumulation inside the <strong><code>DOM</code></strong>. This can also be prevented with another attribute called:</p> <pre><code>data-dom-cache="true" </code></pre> <p>or by initializing global parameter: </p> <pre><code>$.mobile.page.prototype.options.domCache = true; </code></pre> <h2>How page architecture impacts page events</h2> <p>jQuery Mobile has several page events (more about it can be found <strong><a href="http://www.gajotres.net/document-onpageinit-vs-document-ready/" rel="nofollow noreferrer">HERE</a></strong> or <strong><a href="https://stackoverflow.com/a/14469041/1848600">HERE</a></strong>). They are here to cover full page load / transition process. Advanced jQuery Mobile users know to use <strong><code>pageinit</code></strong> event instead of jQuery classic <strong><code>document ready</code></strong> event. Just like <strong><code>document ready</code></strong>, <strong><code>pageinit</code></strong> is here to trigger only once during the page initialization.</p> <p>But there's a catch, <strong><code>pageinit</code></strong> will trigger only once during the page initialization inside the <strong><code>DOM</code></strong>. If page is removed from the <strong><code>DOM</code></strong> (in multi HTML template) and loaded again <strong><code>pageinit</code></strong> will trigger again. </p> <p>In a nutshell each page <strong><code>DOM</code></strong> initialization will trigger new page events initialization. Like mentioned previously this can be prevented with page cashing.</p> <h2>Impact of page cashing</h2> <p>This is almost a tabu theme for <strong><code>jQuery Mobile</code></strong> developers so let me tell something, there's no need to be afraid of page cashing. Believe me, jQuery Mobile is robust framework and it usually plays well on every available platform. Huge number of complains related to jQuery Mobile are not directly related to its large DOM size requirements so don't worry about cashing. </p> <p>That doesn't mean you should fill the <strong><code>DOM</code></strong> like a drunken sailor. Every app development must be planed in advance. Mostly used pages must permanently stay inside the DOM. Everything else should be used ad hoc (loaded / removed when needed).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload