Advertencias de memoria/colisión con la aplicación para iPad PhoneGap

Question

He intentado varios enfoques para hacer una aplicación nativa de una página utilizando Phonegap, y estoy buscando algún consejo general sobre solución de problemas.

Primera aproximación: Es básicamente un montón de diferentes páginas y sub-páginas cargadas con jQuery en contenedores que viven en la página de índice. Por lo tanto, no se carga la página, solo carga los fragmentos de página de las páginas en un shell, usando .load().

Segundo enfoque: hice una página HTML de una página con todo el contenido, a continuación, mostrar y ocultar que en base a acuerdo con la clase de un elemento de navegación a un id de un contenedor de contenido.

Ambos enfoques funcionan bien mecánicamente. El problema parece residir en el hecho de que todas mis subpáginas tienen una galería o de 2 a 6 imágenes (así que tengo un total de más de 215 imágenes en total, 660 x 440) para las que he usado el ciclo jquery, y Touchwipe para activar el desplazamiento con gestos. Las galerías funcionan bien, pero después de desplazarse por unas 35 galerías, la aplicación siempre recibe un nivel de advertencia de memoria 1, luego 2 y luego se bloquea. El uso de mi memoria en los instrumentos parece estar bien ... la versión de fragmentos cargados de Ajax se mantiene alrededor de 2 megabytes de bytes en vivo, el de un solo busca consistentemente en alrededor de 5 megas. Las galerías están compuestas por imágenes de fondo CSS en divs, ya que parece funcionar mejor que las etiquetas.

No veo ninguna pérdida de memoria, o realmente cualquier otro problema fuera de las advertencias de memoria. Estoy algo atrapado en cómo rastrear esto. He hecho pruebas y errores absolutamente hasta la muerte. Ha reducido el javascript a lo esencial. Algo parece estar acumulándose con el tiempo.

¿Alguna idea sobre cómo descubrir qué está pasando? ¿Hay algunos primeros enfoques para asegurarse de que no está pasando nada con el javascript que está causando algún tipo de pérdida de memoria?

Es muy frustrante que todo funcione bastante bien, excepto en el iPad.

Mi próxima táctica podría ser intentar reescribir las imágenes de fondo de la galería a un gif en blanco cuando no estén en uso.

Aquí está el código que estoy usando para el localizador:

$(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"); 
      } 
     }); 
    }); 
}); 

Gracias por cualquier consejo, estoy tirando de mi pelo.

Answer 1

A primera vista, no veo nada de malo. Usted puede tratar de destruir explícitamente la galería Ciclo jQuery cuando se abre la siguiente y ver si eso ayuda

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

Answer 2

Creo que el problema no estaba relacionado con javascript, pero relacionada con la cantidad de imágenes webkit puede mantener en activo memoria. Parece relacionado con esta pregunta: Crashing when loading images

Mi solución fue utilizar una combinación de las cosas mencionadas allí. Antes que nada, estoy usando divs con una imagen de fondo para mis galerías. En segundo lugar, estoy comenzando con todas las imágenes de fondo configuradas para ser un GIF en blanco. Cuando muestro una subsección y activo una galería, uso jquery para reescribir la imagen de fondo css en la fuente de la imagen real, luego cuando hago clic en un nuevo enlace secundario, lo reinicio para usar el GIF en blanco. Esto parece mantener el número de imágenes de fondo div "activas" a solo 3-7 a la vez, aparte de la interfaz gfx. Mientras tanto, los otros 200 divs con imágenes de fondo en las galerías (que no se muestran de todos modos) son solo un gif en blanco.

Creo que este problema está relacionado en general con las limitaciones en UIWebview, en lugar de algo específico de PhoneGap o jquery. No estoy seguro de que esta sea la solución final, pero puedo ejecutar la aplicación sin fallar hasta el momento, y mis bytes activos en el Instrumento de asignación permanecen constantemente alrededor de 1.3 megas.