向页面添加大量元素后出现的延迟问题

我正在网格上实现虚拟滚动。滚动/按需加载功能工作相当顺利。但是，当检测到用户正在快速滚动(定义为超过450毫秒)时，在处理过程中显示一个带有加载gif的半透明div。

我的问题是，在加载完成和追加完成后，我调用隐藏覆盖期望看到更新的网格。相反，我有一个2-3秒的延迟，然后覆盖隐藏和数据显示。

问题:

Part A:为什么div没有留在屏幕上，即使隐藏它的代码行出现在附加的…导致意外的2-3秒等待，没有进度/加载指示给用户?

Part B:在完成添加和渲染之前，可以做些什么来确保覆盖保持可见?

执行行看起来像这样:

    CheckToFetch(id, $(gridScrollElm).scrollTop(), true);
    ToggleOverlay(gridScrollElm, false);

正如你所看到的，理想情况下，在数据加载和渲染后，覆盖应该隐藏。

在CheckToFetch后面有一个方法调用链，但我只展示最相关的部分，其中发生追加。

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 < rowsToAdd.length; r++)
    {
        var elmsQueue = new Array(); //used to do efficient string concat, especially for IE
        elmsQueue.push('<tr>');
        for (var c = 0; c < gd['Columns'].length; c++)
        {
            elmsQueue.push('<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">');
            }
            else
            {
                elmsQueue.push('>');
            }
            elmsQueue.push(cell[c]);
            elmsQueue.push('</td>');
        }
        elmsQueue.push('</tr>');
        tbody.append(elmsQueue.join(''));
        rowClass++;
    }