Memory warnings/crashing with PhoneGap iPad app

Question

I've tried several approaches to make a one-page native app using Phonegap, and am seeking some general advice on troubleshooting.

First approach: 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().

Second approach: 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.

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.

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.

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?

It's very frustrating that the whole thing works pretty well, except on the iPad.

My next tactic might be to try to rewrite the gallery background images to a blank gif when they are not in use.

Here is the code I'm using for the one-pager:

$(document).ready(function(){

    document.addEventListener('touchmove', function(e){ e.preventDefault(); });

    $('div#mainpages > div').hide(); 

    $("ul#mainnav li").click(function() {
        $("#mainpages > div").hide();
        var navClass = $(this).attr('class');
        var target='#'+navClass;
        $(target).show();
        $('[id^=subpages] > div').hide(); 
        $(target).find('[id^=subpages_] div:first').show();
    });


    $('[id^=subnav] li').click(function() {

        $('[id^=subnav_] li').removeClass('current');
        $('[id^=subpages_] > 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");
            } 
        });  
    });
});

Thanks for any advice, I'm pulling my hair out.

Answer 1

I think the problem was not related to javascript, but related to the amount of images webkit can maintain in active memory. It seems related to this question: Crashing when loading images

My solution was to use a combination of things mentioned there. First of all, I'm using divs with a background image for my galleries. Secondly, I'm starting out with all background images set to be a blank GIF. When I show a subsection and activate a gallery, I use jquery to rewrite the css background-image to the actual image source, then when I click a new sublink, I reset it to be use the blank GIF. This seems to keep the number of "active" div background-images to only 3-7 at one time, aside from interface gfx. Meanwhile the other 200 or so divs with background-images in galleries (not showing anyway) are just a blank gif.

I think that this problem is related in general to limitations in UIWebview, rather than something specific to PhoneGap or jquery. I'm not positive that this is the final solution, but I am able to run the app without crashing so far, and my live bytes in the Allocations Instrument stays consistently around 1.3 meg.