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

使用ajax向页面添加元素会冻结一秒钟

1 个答案: