title: Memory warnings/crashing with PhoneGap iPad app
body: <p>I've tried several approaches to make a one-page native app using Phonegap, and am seeking some general advice on troubleshooting. </p>
  
  <p><strong>First approach:</strong> 
  It's basically a bunch of different pages and sub-pages loaded with jquery into containers that live on the index page. So, no page loads, just loading page fragments from pages into a shell, using .load().</p>
  
  <p><strong>Second approach:</strong> 
  I made a one-page html page with all content, then show and hide that based on matching the class of a navigation item to an id of a content container. </p>
  
  <p>Both approaches work fine mechanically. The problem seems to lie in the fact that all of my subpages have a gallery or 2-6 images, (so I've got a total of over 215 images altogether, 660 x 440) for which I've used jquery cycle, and Touchwipe to activate scrolling with gestures. The galleries work fine, but after some scrolling through about 35 galleries, the app always receives a memory warning level 1, then 2, then crashes. My memory usage in instruments seem ok... the ajax loaded fragment version stays around 2 megabytes live bytes, the one-pager stays consistently at around 5 meg. The galleries are composed of CSS background images in divs, as this seemed to perform better than  tags. </p>
  
  <p>I don't see any memory leaks, or really any other problems outside of the memory warnings. I'm kind of stuck on how to track this down. I've done trial and error absolutely to death. Have reduced the javascript down to the bare essentials. Something seems to be building up over time. </p>
  
  <p>Any ideas on how to figure out what is going on? Are there some first-approaches to make sure nothing is going on with the javascript that's causing some type of memory leak? </p>
  
  <p>It's very frustrating that the whole thing works pretty well, except on the iPad. </p>
  
  <p>My next tactic might be to try to rewrite the gallery background images to a blank gif when they are not in use. </p>
  
  <p>Here is the code I'm using for the one-pager: </p>
  
  <pre><code>$(document).ready(function(){
  
      document.addEventListener('touchmove', function(e){ e.preventDefault(); });
  
      $('div#mainpages &gt; div').hide(); 
  
      $("ul#mainnav li").click(function() {
          $("#mainpages &gt; div").hide();
          var navClass = $(this).attr('class');
          var target='#'+navClass;
          $(target).show();
          $('[id^=subpages] &gt; div').hide(); 
          $(target).find('[id^=subpages_] div:first').show();
      });
  
  
      $('[id^=subnav] li').click(function() {
  
          $('[id^=subnav_] li').removeClass('current');
          $('[id^=subpages_] &gt; div').hide();
  
          var subnavClass = $(this).attr('class');
          var subtargeted='#'+subnavClass;
          $(subtargeted).show();
  
          $(this).addClass('current');  
  
          $(subtargeted+' .gallery_div_shell').cycle({
              timeout: 0,
              speed: 700,
              speedIn: 300,
              speedOut: 300,
              fx: 'scrollHorz'
          }); 
  
          $(subtargeted+' .gallery_div_shell').touchwipe({
              wipeLeft: function() {
                  $('.gallery_div_shell').cycle("next");
              },
              wipeRight: function() {
                  $('.gallery_div_shell').cycle("prev");
              } 
          });  
      });
  });
  </code></pre>
  
  <p>Thanks for any advice, I'm pulling my hair out. </p>