使用ajax向頁面添加元素凍結一秒鍾

Question

我的頁面上顯示了很多卡片。 為了減少頁面大小和渲染時間，我使用了ajax來加載卡。 但是，當接收到數據並嘗試將數據添加到元素時，我的瀏覽器凍結了一秒鍾，並在打開諸如此類的選項卡時崩潰。

我使用lodash模板和innerHtml將卡傳遞給瀏覽器。

我每個請求收到6張卡數據

這是我的文字/模板：

<script type="text/template" id="card-template">
    <a class="card-image waves-effect waves-block waves-light col s4 m12" href="<%= path  %>">
        <img class="activator" src="<%= imageurl  %>"/>
    </a>
    <div class="col s8 m12">
        <div class="card-content {/literal}{translate key="common.direction"}{literal}">
           <span class="card-title activator grey-text text-darken-4">
           <i class="material-icons {/literal}{translate key="common.icon.alignment.reverse"}{literal}">more_vert</i>
           <a class="grey-text text-darken-4" href="<%= path  %>">
           <span class="text-medium text-xsmall tooltipped" data-position="top" data-delay="50" data-tooltip="<%= title  %>"><%= title  %></span>
           </a>
           </span>
            <p class="status text-small <%= statusColor  %>">
                <i class="tiny material-icons {/literal}{translate key="common.icon.alignment"}{literal}">schedule</i><%= status  %>
            </p>
        </div>
        <div class="card-action {/literal}{translate key="common.direction"}{literal}">
            <a href="<%= path  %>"><%= conf_type  %></a>
        </div>
    </div>
    <div class="card-reveal">
       <span class="card-title grey-text text-darken-4">
       <i class="material-icons {/literal}{translate key="common.icon.alignment.reverse"}{literal}">close</i>
       <span class="text-regular text-xsmall"><%= title  %></span>
       </span>
        <p class="status text-small <%= statusColor  %> text-ultralight text-center">
            <i class="tiny material-icons {/literal}{translate key="common.icon.alignment"}{literal}">schedule</i>
            <span><%= status  %></span>
        </p>
        <div class="row text-center"><%= schedConfshtml  %></div>
    </div>
</script>

我的ajax請求：

 currentRequest = $.ajax({
            url: 'LoadedByAjax',
            type: 'post',
            data:  $.param(data),
            dataType: 'json',
            beforeSend : function()    {
                if(currentRequest != null) {
                    currentRequest.abort();
                }
            },
            success: function (data) {
                data.forEach(function (d) {
                    items.push(card_template({path:path,imageurl:imageurl,title:title,schedConfshtml:schedConfshtml,status:status_html,statusColor:statusColor,conf_type:conf_type}));
                    items_id.push("conf-" + d['conferenceId']);
                });
                $(this).attr('class','col s12 m6 l4 xl3 xxl2 card-place').each(function(){
                    var htm = items.pop();
                    var item_id = items_id.pop();
                    $(this).attr('id',item_id);
                    create_card(htm,item_id);
                });
            }
        });

這是我的卡位代碼：

function create_card (htm,elm) {
    if(htm) {
        document.getElementById(elm).firstChild.setAttribute('class', 'card row');
        document.getElementById(elm).firstChild.innerHTML=htm;
    }
}

Answer 1

嘗試在ajax選項中使用async:true