Issue with lag time after appending a large number of elements to the page
<p>I am implementing virtual scrolling on a grid. The scrolling/on-demand loading feature is working quite smoothly. However, when it's detected that the user is scrolling quickly (defined as longer than 450ms) a semi-transparent div with a loading gif is displayed while the processing takes place.</p>

<p>My issue is that after the loading is done and the appending is finished, I make a call to hide the overlay expecting to see the updated grid. Instead, I have a 2-3 second delay then the overlay hides and the data shows.</p>

<p>The Question: </p>

<p><strong>Part A: Why doesn't the div still stay on screen even though the line of code to hide it comes after the appending ... causing the unexpected 2-3 second wait with no progress/loading indicator to the user?</strong></p>

<p><strong>Part B: What can be done to ensure the overlay stays visible until the adding to the dom is complete and rendered?</strong></p>

<p>the line of execution looks like this:</p>

<pre><code>    CheckToFetch(id, $(gridScrollElm).scrollTop(), true);
    ToggleOverlay(gridScrollElm, false);
</code></pre>

<p>As you can see hear, the overlay ideally should hide after the data is loaded and rendered.</p>

<p>There is a chain of method calls going on behind <code>CheckToFetch</code> but I'll just show the most relevant piece where appending occurs.</p>

<pre><code>AppendData: function (id, data, firstTime)
{
    var gd = SGrid.GetGridData(id);
    var rowClass = (gd["RecordCount"] + 1) % 2; //sets us on correct course for adding AlternatingRow classes

    var grid = $('#' + id)
    var tbody = grid.children('tbody');

    var rowsToAdd = data["Records"];
    for (var r = 0; r &lt; rowsToAdd.length; r++)
    {
        var elmsQueue = new Array(); //used to do efficient string concat, especially for IE
        elmsQueue.push('&lt;tr&gt;');
        for (var c = 0; c &lt; gd['Columns'].length; c++)
        {
            elmsQueue.push('&lt;td align="');
            elmsQueue.push(gd['Columns'][c]['DataAlign']);
            elmsQueue.push('" ');

            var id = rowsToAdd[r]["id"];
            var cell = rowsToAdd[r]["cell"];

            if (rowClass % 2 == 0)
            {
                elmsQueue.push('class="AlternatingRow"&gt;');
            }
            else
            {
                elmsQueue.push('&gt;');
            }
            elmsQueue.push(cell[c]);
            elmsQueue.push('&lt;/td&gt;');
        }
        elmsQueue.push('&lt;/tr&gt;');
        tbody.append(elmsQueue.join(''));
        rowClass++;
    }
</code></pre>
