white screen shows while scroll down /up the

Question

We get the data from server and append list view .our problem is while scroll up/down first it shows white screen then after shows data. while scroll down/up the before coming white screen should remove

for (var i=0; i<len1; i++){
     if (!listCreated) {
         $("#ulcontent").append("<ul id='content' data-role='listview'  data-split-icon='plus' data-split-theme='b' data-inset='true' class='ui-listview ui-listview-inset ui-corner-all ui-shadow'></ul>");  
                  var listCreated = true;
                            $("#ulcontent").trigger("create");
     }
     var geImage=result.rows.item(i).Image;
     var Custimage="";
         if(geImage)
        {
         Custimage=result.rows.item(i).Image;
         }
$('#content').append('<li class="ui-li-static ui-body-inherit ui-li-has-thumb ui-first-child"><img src='+appendurl+append+Custimage+'><p style="white-space: normal;"><b>Location:</b>'+result.rows.item(i).Location+'<br><b> Description:</b>'+ result.rows.item(i).Comments+'</p></a></li>');
}

When we remove images it's not showing any white screen.But we need image Please tell to us what wrong in my code.

Answer 1

The listCreated variable in the if (!listCreated) statement and the listCreated variable in the var listCreated = true; statement are two different variables, so if (!listCreated) is always going to return false . That means means you're never actually creating the unordered list and then the list items are just getting displayed on the page background. So try moving listCreated to the outer scope like this:

var listCreated = false;
for (var i = 0; i < len1; i++) {
    if (!listCreated) {
        $("#ulcontent").append("<ul id='content' data-role='listview'  data-split-icon='plus' data-split-theme='b' data-inset='true' class='ui-listview ui-listview-inset ui-corner-all ui-shadow'></ul>");
        listCreated = true;
        $("#ulcontent").trigger("create");
    }
    var geImage = result.rows.item(i).Image;
    var Custimage = "";
    if (geImage) {
        Custimage = result.rows.item(i).Image;
    }
    $('#content').append('<li class="ui-li-static ui-body-inherit ui-li-has-thumb ui-first-child"><img src=' + appendurl + append + Custimage + '><p style="white-space: normal;"><b>Location:</b>' + result.rows.item(i).Location + '<br><b> Description:</b>' + result.rows.item(i).Comments + '</p></a></li>');
}