Warnings / Memory Failures Using PhoneGap iPad

Question

I tried several approaches to make a one-page application using Phonegap, and I'm looking for some general troubleshooting tips.

First approach: This is basically a bunch of different pages and subpages loaded by jquery into containers that live on the index page. Thus, no page is loaded, just loading fragments of the page from the pages into the shell using .load ().

Second approach: I created a one-page html page with all the content, and then displayed and hid it based on the correspondence of the class of the navigation element to the identifier of the content container.

Both approaches work mechanically. The problem is that all my subpages have a gallery or 2-6 images (so I have a total of more than 215 images in total, 660 x 440), for which I used the jquery and Touchwipe loop to activate scrolling with gestures . Galleries work fine, but after scrolling through about 35 galleries, the application always gets a warning level of memory 1, then 2, then a crash. My memory usage in tools looks fine ... the version of the downloaded ajax fragment is stored in bytes with a capacity of 2 megabytes, a single-pager remains stable at about 5 megabytes. Galleries consist of CSS background images in a div, as it seemed to be better than tags.

I see no memory leaks or really no other problems besides memory warnings. I'm kinda stuck on how to track this. I tried trial and error to death. Reduced javascript to simple things. Something seems to grow over time.

Any ideas on how to figure out what is going on? Are there any first approaches to make sure that nothing happens with javascript that causes a memory leak of a certain type?

It is very frustrating that all this works very well, with the exception of the iPad.

My next tactic might be trying to copy gallery background images to empty gifs when not in use.

Here is the code that I use for 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 am pulling my hair out.

Answer 1

I think the problem is not related to javascript, but is related to the number of images that webkit can support in active memory. This seems to be related to this question: Crash while loading images

My solution was to use a combination of the things mentioned there. First of all, I use divs with a background image for my galleries. Secondly, I start with all background images set as an empty GIF. When I show the subsection and activate the gallery, I use jquery to overwrite the css background image to the actual image source, and then when I click the new cut, reset should use an empty GIF. It seems that the number of “active” div background images is only 3-7 at a time, except for the gfx interface. Meanwhile, the other 200 or so divs with background images in galleries (not showing anyway) is just an empty gif.

I think this problem is generally related to limitations in UIWebview, and not something specific to PhoneGap or jquery. I'm not sure if this is the final solution, but I can still run the application without crashing, and my real-time bytes in the Allocations Instrument remain at about 1.3 megabytes.

Answer 2

At first glance, I see nothing wrong. You can try to explicitly destroy the jQuery Cycle gallery when you open the next one and see if it helps

 $(youridentifier).cycle('destroy');