立即显示引导模式，而无需等待加载内容。

Question

我在我的应用程序中使用了一个引导模式弹出。下面是我遇到的问题，并且一直未能找到解决办法。

假设我有一个如下所示的单击事件侦听器：

jQuery("#show-invoice").click(function(){
       jQuery('#invoice-details').modal('show');

       ...a call to an api to retrieve invoice details...
       ...it takes about 2-3 seconds to retrieve...
});

问题是当我单击Chrome中的#show-发票链接时，模式等待api调用完成，从而在显示模态窗口之前造成2-3秒的延迟。在火狐中，模式窗口立即显示，这是有意义的，因为jQuery(‘#’).modal(‘show’)；运行在其他任何东西之前。

因此，我的问题是，如何在偶数发生时立即使模态窗口显示，而不等待所有浏览器中的jQuery(‘#’).modal(‘show’)之后的任何内容？

Answer 1

您可以立即显示模态。

jQuery('#invoice-details').modal('show');

在此之后，您可以执行异步ajax调用。当数据正在加载时，您应该在模式中显示加载图标而不是发票细节。数据加载之后，您可以用新加载的数据替换图标。就像这样：

 jQuery.ajax({
    url: 'invoice_details_url',
    type: 'get',
    success: function ( invoice_details_data ) {
       jQuery('#invoice-details .invoice-details-container').
              empty().append(invoice_details_data);
    },
    async:true,
 });