在由多個xml文件提供的列表視圖中加載多個圖像時遇到困難

Question

我正在爲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(); 
       } 
      } 
     }); 
    } 

Answer 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; 
       } 
      } 
     });   
    } 
}