Question

我已经尝试了几种使用Phonegap制作单页本机应用程序的方法，并且正在寻求有关故障排除的一般建议。

第一种方法： 它基本上是一堆不同的页面和子页面，它们将jquery加载到索引页面上的容器中。因此，没有页面加载，只是使用.load（）将页面片段从页面加载到shell中。

第二种方法： 我创建了一个包含所有内容的单页html页面，然后根据将导航项的类与内容容器的id匹配来显示和隐藏该页面。

两种方法都能很好地机械地工作。问题似乎在于我的所有子页面都有一个图库或2-6个图像（所以我总共有超过215个图像，660 x 440），我已经使用了jquery循环，并且Touchwipe以手势激活滚动。画廊工作正常，但经过一些滚动浏览大约35个画廊后，应用程序总是收到内存警告级别1，然后是2，然后崩溃。我在仪器中的内存使用似乎没问题...... ajax加载的片段版本保持在2兆字节的活字节数，单页分页器一直保持在5兆字节左右。画廊由div中的CSS背景图像组成，因为它似乎比标签更好。

我没有看到任何内存泄漏，或者内存警告之外的任何其他问题。我有点坚持如何追踪这一点。我完全是试验和错误的死亡。已经将javascript减少到了最基本的要领。随着时间的推移，似乎正在形成一些东西。

有关如何弄清楚发生了什么的任何想法？是否有一些第一种方法可以确保javascript不会导致某种类型的内存泄漏？

除了iPad之外，整个过程非常有效，这是非常令人沮丧的。

我的下一个策略可能是尝试在不使用时将画廊背景图像重写为空白的gif。

这是我用于单页面的代码：

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

感谢您的任何建议，我正在拔头发。

Answer 1

我认为问题与javascript无关，但与webkit可以在活动内存中维护的图像数量有关。这似乎与这个问题有关：Crashing when loading images

我的解决方案是使用那里提到的组合。首先，我正在为我的画廊使用带有背景图像的div。其次，我开始将所有背景图像设置为空白GIF。当我显示一个子部分并激活一个图库时，我使用jquery将css背景图像重写为实际的图像源，然后当我点击一个新的子链接时，我将其重置为使用空白GIF。除了接口gfx之外，这似乎一次只能将“活动”div背景图像的数量保持为3-7。与此同时，另外200个左右的画廊中的背景图像（无论如何都不显示）只是一个空白的GIF。

我认为这个问题通常与UIWebview中的限制有关，而不是与PhoneGap或jquery特有的内容有关。我并不认为这是最终解决方案，但我能够在不崩溃的情况下运行应用程序，并且我在Allocations Instrument中的实时字节始终保持在1.3兆。

Answer 2

乍一看，我没有看到任何错误。当您打开下一个库时，您可能会尝试显式销毁jQuery Cycle库，看看是否有帮助

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

内存警告/ PhoneGap iPad应用程序崩溃

2 个答案: