titanium display hundreds of rows with tableviewrow

Question

using these lines of code I can display aproximately hundreds of tableviewrows in a tableview. The problem is that the window is opening in 3 seconds (android device). I guess there's some optimization I have to do in order to display the table in less than 1 sec.

any advice about it? thanks in advance

EDIT lines of code

module.exports.draw = function(){
        els = [];
        var cocktails = Ti.App.cocktails;

        for(var i=0;i<cocktails.length;i++){
                els.push({
                        type: 'Ti.UI.View',
                        searchableText : cocktails[i].nome,
                        properties : {
                            cocktail_id:cocktails[i].id,
                            borderColor:"#eee",
                            borderWidth: 1,
                        height: 100,
                        nome:cocktails[i].nome
                        },
                        childTemplates : [
                                {
                                        type: 'Ti.UI.Label',
                                        bindId : cocktails[i].id,
                                        properties : {
                                           text: cocktails[i].nome,
                                           cocktail_id:cocktails[i].id,
                                           color:"#000",
                                           left:30,
                                           zIndex:10,
                                           top:10,
                                           font:{
                                                fontSize:20,
                                                fontWeight:'bold'
                                           }                   
                                        },
                                        events : {
                                                click : function(e) {
                                                        Ti.App.fireEvent("render",{pag:'prepare',id:e.bindId});
                                                }
                                        }
                                },
                                {
                                        type : 'Ti.UI.Label',
                                        properties : {
                                                left:30,
                                                color:"#999",
                                                top:50,
                                                cocktail_id:cocktails[i].id,
                                                text:cocktails[i].ingTxt != undefined?cocktails[i].ingTxt:''   
                                        },
                                        bindId:cocktails[i].id,
                                        events : {
                                                click : function (e){
                                                        Ti.App.fireEvent("render",{pag:'prepare',id:e.bindId});
                                                }
                                        }
                                }
                        ]
                });
        }
    var search = Ti.UI.createSearchBar({
                height:50,
                width:'100%'
        });
        search.addEventListener('cancel', function(){
            search.blur();
        });
        var content = Ti.UI.createListView({sections:[Ti.UI.createListSection({items: els})],searchView:search});
        search.addEventListener('change', function(e){
        content.searchText = e.value;
    });
        return content;
};

Answer 1

As thiswayup suggests, lazy loading would probably be a very good idea.

If you do not wan't to use lazy loading you could do this:

function getListWindow( items ) {
   var firstLayout = true;

   var win = Ti.UI.createWindow({
      //Your properties here.
   });

   var list = Ti.UI.createTableView({
      data : [],
      //other properties here
   });
   win.add(list);

   win.addEventListener('postlayout', function() {
      if(firstLayout) {
         firstLayout = false;

         var rows = [];

         //Assuming the items argument is an array.
         items.forEach(function( item ) {
            rows.push( Ti.UI.createTableViewRow({
               //Properties here based on item
            }));
         });

         list.data = rows;
      }
   });

   return win;
}

Doing this will open your window right away and load the rows after the window is shown. Showing a loader while the rows are being generated would probably be a good idea.

Answer 2

You need to look into lazy loading http://www.appcelerator.com/blog/2013/06/quick-tip-cross-platform-tableview-lazy-loading/