javascript - 等待数据加载时模态内的微调器

Question

我有一个元素列表，每个元素都附有一个徽章。当您单击徽章时，它将从部分 View 加载表格。

这是我的徽章循环:

  @foreach (var item in Model)
  {
        <li>
            <a href="#my_modal" data-toggle="modal" data-book-id="@Url.Action("AssociatedToHideout", "Hideout", new { id = item.HideoutID })">
                <span class="badge-rounded bg-red">@Html.Action("TaskCount", "Hideout", new { id = @item.HideoutID })</span>                  
            </a>
            <div class="item">            
                <a href='@Url.Action("Index", "Hideout", new { id = @item.HideoutID })'>
                    <img src="~/Assets/img/database.png">
                    <span class="caption">@item.Name</span>
                </a>
            </div>

        </li>      
}

data-book-id 中的 URL 操作将告诉我要加载哪个部分 View 。

这是我的模态:

<div class="modal" id="my_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Modal header</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>  

将其加载到模式中的脚本是这样的:

<script>
    $('#my_modal').on('show.bs.modal', function(e) {
        var bookId = $(e.relatedTarget).data('book-id');

        $.get(bookId, function (data) {
            $(e.currentTarget).find('.modal-body').html(data);
        });
    });

    $('#my_modal').on('hidden.bs.modal', function(e) {
    $(e.currentTarget).find('.modal-body').text('');
    });
</script>

问题是当我第一次加载页面时，有时 .html(data) 不会立即显示，所以我希望在等待时出现一个微调器。我怎样才能做到这一点？

Answer 1

我们使用waitscreen.js。使用起来非常简单available on github 。您需要显示或隐藏的是:

//Show options
waitScreen.show();
waitScreen.show("Message");
//Then hide
waitScreen.hide();

并将它们嵌入到适当的位置，即:

$('#my_modal').on('show.bs.modal', function(e) {
    var bookId = $(e.relatedTarget).data('book-id');
    waitScreen.show();

    $.get(bookId, function (data) {
        $(e.currentTarget).find('.modal-body').html(data);
        waitScreen.hide();
    });
});

您还应该添加一些错误处理，因为如果发生任何错误，模式将永远不会消失......