在由多个xml文件提供的列表视图中加载多个图像时很困难

时间:2012-04-24 11:58:03

标签: javascript html5 jquery jquery-mobile

我正在为Android开发一个html应用程序,我正在尝试在列表视图中加载图像。特定于列表项的数据由多个xml文件提供。我使用ajax加载xml文件并填充列表项。我在这里遇到的问题是有164个列表项。因此,要加载164个图像和10个xml文件。我的装载机功能在两次迭代后耗尽。它确实读取了xml文件,但它无法动态创建列表项并在两次迭代后用图像填充它们。我相信这是由于堆栈限制。我想不出替代解决方案。如果有人可以建议一个备受青睐的替代解决方案。下面是我的装载机功能。这是一个递归函数:

function loadChannels() {

        $.ajax({
            type: "GET",
            url: curURL,
            dataType: "xml",
            error: function(){ console.log('Error Loading Channel XML'); },
            success: function(nXml) {
                var noOfItems = parseInt($($(nXml).find('total_items')[0]).text(), 10);
                var startIdx = parseInt($($(nXml).find('item_startidx')[0]).text(), 10);

                var allItems = $(nXml).find('item');


                $(allItems).each(function() {
                    var obj = $("<li><span id='cont-thumb'></span><span id='cont-name'></span></li>");
                    $("#content-scroller ul").append($(obj));

                    var imgURL = $($(this).find('item_image')[0]).text();
                    var contThumb = $(obj).children()[0];
                    $(contThumb).css("background-image", 'url('+imgURL+')');
                    var name = $($(this).find('name')[0]).text();
                    var contName = $(obj).children()[1];
                    $(contName).text(name).css('text-align', 'center');
                    var url = $($(this).find('link')[0]).text();
                    $(obj).data('item_link', url);
                    $(obj).bind('click', onJPContSelected);                
                });

                if(startIdx+allItems.length < noOfItems){

                    var newIdx = new Number(startIdx+allItems.length);
                    var tokens = curURL.split("/");
                    tokens[tokens.length-2] = newIdx.toString(10);
                    curURL = "http:/";
                    for(var i=2; i<tokens.length; i++)
                        curURL = curURL + "/" + tokens[i];

                    loadChannels();
                }
            }
        });
    }

1 个答案:

答案 0 :(得分:1)

尝试使用外部循环删除递归 - 类似于:

function loadChannels(){
    var stopFlag = false;
    // request the pages one after another till done
    while(!stopFlag) 
    {
        $.ajax({
            type: "GET",
            url: curURL,
            dataType: "xml",
            error: function(){ 
                console.log('Error Loading Channel XML'); 
                errorFlaf = true;
            },
            success: function(nXml) {
                var noOfItems = parseInt($($(nXml).find('total_items')[0]).text(), 10);
                var startIdx = parseInt($($(nXml).find('item_startidx')[0]).text(), 10);
                var allItems = $(nXml).find('item');
                $(allItems).each(function() {
                    var obj = $("<li><span id='cont-thumb'></span><span id='cont-name'></span></li>");
                    $("#content-scroller ul").append($(obj));

                    var imgURL = $($(this).find('item_image')[0]).text();
                    var contThumb = $(obj).children()[0];
                    $(contThumb).css("background-image", 'url('+imgURL+')');
                    var name = $($(this).find('name')[0]).text();
                    var contName = $(obj).children()[1];
                    $(contName).text(name).css('text-align', 'center');
                    var url = $($(this).find('link')[0]).text();
                    $(obj).data('item_link', url);
                    $(obj).bind('click', onJPContSelected);                
                });

                if(startIdx+allItems.length < noOfItems){

                    var newIdx = new Number(startIdx+allItems.length);
                    var tokens = curURL.split("/");
                    tokens[tokens.length-2] = newIdx.toString(10);
                    curURL = "http:/";
                    for(var i=2; i<tokens.length; i++)
                        curURL = curURL + "/" + tokens[i];

                    // lets disable the recursion
                    // loadChannels();
                }
                else {
                    stopFlag = true;
                }
            }
        });        
    }
}