显示加载图像效果不佳

Question

我已定义以下脚本作为实现分页的一部分：

    var getPage = function () {
        var $a = $(this);
        var options = {
            url: $a.attr("href"),
            data: $("form").serialize(),
            type: "get"
        };
        $.ajax(options).done(function (data) {
            $(".loadingimage").show();
            var target = $a.parents("div.pagedList").attr("data-tms-target");
            $(target).replaceWith(data);
        });
        return false;
    };


$(document).ready(function () {

    $(".main-content").on("click", ".pagedList a", getPage);


})

部分加价如下：-

<div id="AuditTable">
<div class="pagedList" data-tms-target="#AuditTable">
                        @Html.PagedListPager(Model , page => Url.Action("Index",new { page }),
                        PagedListRenderOptions.ClassicPlusFirstAndLast)

</div>  <img src="~/Content/Ajax-loader-bar.gif" class="loadingimage" id="progress2" />
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead><tr>

分页效果很好，但是问题是

$(".loadingimage").show();

在数据检索期间不会显示隐藏的加载图像，有人可以对此问题提出建议吗？

Answer 1

试试这些

• 您可以在浏览器中加载图像（例如， http : //yourdomain.com/Content/Ajax-loader-bar.gif ）。如果可以，请考虑将完整URL写入图像src。
• 尝试使用id作为选择器（例如$("#progress2).show(); ）
• 如果这些都不能将您带到可以将图像放入div的任何位置，请删除其类（假设您使用css将其隐藏） .show(); 和.hide(); 在getPage函数中。

HTML：

<div id="loadcontainer"><img src="Content/Ajax-loader-bar.gif" id="progress2" /></div>

使用Javascript：

var getPage = function () {
  $("#loadcontainer").show();
  var $a = $(this);
  var options = {
      url: $a.attr("href"),
      data: $("form").serialize(),
      type: "get"
  };
  $.ajax(options).done(function (data) {
      $("#loadcontainer").hide();
      var target = $a.parents("div.pagedList").attr("data-tms-target");
      $(target).replaceWith(data);
  });
  return false;
};