Question

我有一个渲染5张图像和分页功能。此功能使用ajax获取数据。
效果很好，但是当我使用分页时，可以看到“创建” HTML的过程。

我想添加一个loading.gif，直到所有HTML加载完成，并显示所有结果

function getImages(init, buttonPaging) {
    var data = {};
    if (init) {
        data["int"] = "1";
    } else {
        data["int"] = $(buttonPaging).text();
    }

    $.ajax({
        type: "POST",
        url: '@Url.Action("GetImages", "Image")',
        data: JSON.stringify(data),
        beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        contentType: "application/json",
        dataType: "json",
        success: function (data) {
            if (data.success) {
                $('#imgList').children().remove();
                for (var i = 0; i < data.imageList.length; i++) {
                    (function (img) {
                        $('#imgList').append(drawList(img, data.baseUrl));
                    })(data.imageList[i]);
                }
                $('#pagingList').children().remove();
                for (var i = 0; i < data.pagingInfo.totalPages; i++) {
                    (function (paging) {
                        var isCurrentPage = false,
                            index = i;

                        index++;
                        if (paging.currentPage == index) {
                            isCurrentPage = true;
                        }
                        $('#pagingList').append(drawPaging(index, isCurrentPage));
                    })(data.pagingInfo);
                }
            } else {
                errors += data.error;
            }
        },
        error: function () {
            errors += 'Please contact with administrator - img list at edit product';
            alert(errors);
        }
    });
}

我看到了有关promise和回调的教程，但我并不擅长，而且我不知道如何为这些重写代码。还有另一种解决问题的方法吗？

解决方案：：它可能对其他方面很方便：

function hideLoader() { setTimeout(function () { $('.loader-sm').hide(); }, 750); }
function showLoader() { $('.loader-sm').show(); }
function hideList() { $('#imgList').hide(); }
function showList() { setTimeout(function () { $('#imgList').show(200); }, 750); }

success: function () {
                    if (data.success) {
                        //do something   
                    } else {
                        showList();
                        hideLoader();
                    }
                },
                error: function () {
                    showList();
                    hideLoader();
                },
                complete: function () {
                    showList();
                    hideLoader();
                }

Answer 1

有一个用于显示加载图像图标的类，并将其放置在块本身中，完成后将其隐藏。看下面的示例。它可能对您有帮助。

beforeSend: function() {
    $('#imgList').addClass('loading');        
},
success: function(data) {
    $("#imgList").removeClass('loading');        
},
error: function(xhr) { // if error occured
   $("#imgList").removeClass('loading');
},
complete: function() {       
   $("#imgList").removeClass('loading');        
}

否则，您可以让loader div块在beforesend（）上显示该块，并成功/完整地将其隐藏。

Answer 2

您不确定我可以这样做吗，但这会为您提供帮助

  function getImages(init, buttonPaging) {
                var data = {};
                if (init) {
                    data["int"] = "1";
                } else {
                    data["int"] = $(buttonPaging).text();
                }
   let promise = new Promise(function(resolve, reject) {
     //add your code for add loading.gif
            $.ajax({
                type: "POST",
                url: '@Url.Action("GetImages", "Image")',
                data: JSON.stringify(data),
                beforeSend: function (xhr) { xhr.setRequestHeader("XSRF-TOKEN", 
             $('input:hidden[name="__RequestVerificationToken"]').val()); },
                contentType: "application/json",
                dataType: "json",
                success: function (data) {
                    if (data.success) {

                        $('#imgList').children().remove();
                        for (var i = 0; i < data.imageList.length; i++) {
                            (function (img) {
                                $('#imgList').append(drawList(img, data.baseUrl));
                            })(data.imageList[i]);
                        }

                        $('#pagingList').children().remove();
                        for (var i = 0; i < data.pagingInfo.totalPages; i++) {
                            (function (paging) {
                                var isCurrentPage = false,
                                    index = i;

                                index++;
                                if (paging.currentPage == index) { isCurrentPage = true; }
                                $('#pagingList').append(drawPaging(index, isCurrentPage));
                            })(data.pagingInfo);
                        }
    resolve(); 
                    } else {
                        errors += data.error;
    resolve(); 
                    }
                },
                error: function () {
                    errors += 'Please contact with administrator - img list at edit product';
                    alert(errors);
    resolve(); 
                }
            });
    }
promise.then(
  result => alert("done"), // remove loading.gif

);
        }

如何等待直到（附加）完成，然后显示结果javascirpt / jquery

2 个答案: