I have a page which contains a lot of  <div data-role="page" id="home">-pages

and each id is a unique identifier that I am using in another list to link to using page.html#unique_id. To make that work I use rel="external" so the page is reloaded.

Unfortunately that means I loose the transition from the previous page. Is there any way to do a transition when using rel="external"? I'm still on the local site but since I cannot access an id further down in the page without rel=external I'm a bit screwed.

I have been thinking of adding the pages to the same page as the list. however - each of those pages contains a image + info. Another Q is - even though just one part of the page is visible, does all the images on the page in other "<div data-role="page" id="home">"-divs get loaded in the background? See this example below:

2. <div data-role="page" data-theme="b" id="byyear">
3.   <div data-role="header" >
4.    <h1>Nobel Laureates By Year</h1>
5.   </div>
6.   <!-- /header -->
7.   <div data-role="content" >
8.      <div style="padding-top:10px;"><ul data-role="listview" data-theme="d" data-inset="true">
9.     <li><a href="#id1" >Page 1</a></li>
10.     <li><a href="#id2" >Page 2</a></li>
11.     <li><a href="#id3" >Page 3</a></li>
12.     </ul></div>
13.   </div>
14.   <!-- /content -->
15.   <div data-role="footer">
16.     <h4>Page Footer</h4>
17.   </div>
18.   <!-- /footer --> 
19. </div>
20. <!-- /page -->
21. 
    
22. <div data-role="page" data-theme="b" id="id1">
23.   <div data-role="header" >
24.    <h1>Nobel Laureates By Year</h1>
25.   </div>
26.   <!-- /header -->
27.   <div data-role="content" >
28. <img src="/link_to_image">
29. <h2>Title</h2>
30. <p>Some text</p>    
31.   </div>
32.   <!-- /content -->
33.   <div data-role="footer">
34.     <h4>Page Footer</h4>
35.   </div>
36.   <!-- /footer --> 
37. </div>
38. <!-- /page -->
39. 
    
40. <div data-role="page" data-theme="b" id="id2">
41.   <div data-role="header" >
42.    <h1>Nobel Laureates By Year</h1>
43.   </div>
44.   <!-- /header -->
45.   <div data-role="content" >
46. <img src="/link_to_image">
47. <h2>Title</h2>
48. <p>Some text</p>   
49.   </div>
50.   <!-- /content -->
51.   <div data-role="footer">
52.     <h4>Page Footer</h4>
53.   </div>
54.   <!-- /footer --> 
55. </div>
56. <!-- /page -->
57. 
    
58. <div data-role="page" data-theme="b" id="id3">
59.   <div data-role="header" >
60.    <h1>Nobel Laureates By Year</h1>
61.   </div>
62.   <!-- /header -->
63.   <div data-role="content" >
64. <img src="/link_to_image">
65. <h2>Title</h2>
66. <p>Some text</p>    
67.   </div>
68.   <!-- /content -->
69.   <div data-role="footer">
70.     <h4>Page Footer</h4>
71.   </div>
72.   <!-- /footer --> 
73. </div>
74. <!-- /page -->

Does all the images get downloaded when the page is accessed or just the image of the page currently being displayed? Any of the lists we have links to 50-100 people and while I could just put them in the same page (it's not that much info about each of them) having 50-100 images á 16 KB getting downloaded just because you look at one person seems not good. 

If they do, would it be possible to do a javascript solution where the image at load time is a low-res profile-pic (same for everyone) and when you click on a person in the list it will use javascript to put the correct url into the scr for the image and load it? 

I really am new to JQuery etc. so while I am trying to read up and learn I would appreciate some help is someone has an answer to these questions.

Thanks in advance.

Björn