2

Given a one-html-multiple-pages app, in each of my pages I plan JS inject long html codes and animations which can be heavy. HTML code such :

<div data-role="page" id="page11">
  ...
</div>
<div data-role="page" id="page12">
 <h2 id="anchor12">Title: Page 12</h2>
 <script>myScript12() // inject complex content to #anchor12</script>
</div>

1. When does my myScript12() is fired ? (When I open the .html file or when I click and open the #page12 ?

2. What happen to the JS generated content when I leave #page12 for an other page ?

Edit: I don't want to load all my 20 heavy pages on .html load.

Solution: +1 for the detailed explanation by Gajotres (JQM: document ready vs page events), below is my current solution. To run the js ONLY when the given data-role="page" is displayed...

Use the following JQM HTML/JS:

<div data-role="page" id="page12">
 <h2 id="anchor12">Title: Page 12</h2>
 <script>
$('#page12').on('pageinit') { //only run when page is displayed
     myScript12() // inject complex content to #anchor12
});</script>
</div>
Community
  • 1
  • 1
Hugolpz
  • 17,296
  • 26
  • 100
  • 187

1 Answers1

2

  1. That script will execute as soon as page is loaded into the DOM. That's why page events exist. Basically if you want to time your code execution do it inside a page event. If you want to find more about page event's read my other answer: jQuery Mobile: document ready vs page events.

  2. When you leave your page that content is still there loaded into the DOM. If you want to prevent large DOM content you can use pagehide event to clean previous page content. There's also an attribute that can be placed inside a data-role="page" div to prevent DOM cashing. Attribute name is data-dom-cache="true" and you can find more abut it here.

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130