Question

这是一个ASP.Net MVC 5项目。

我有一个简单的javascript / jQuery如下：

<script>
  $(document).ready(function () {
    $("#textBox").focusout(function () {
      var phrase= $("#textBox").val();
      phrase= phrase.replace(new RegExp(/\s+/, 'g'), "%20");
      $("#commentDiv").load("../Search/SearchSingular?phrase=" + phrase);
    });
  });
</script>

正如您所看到的，有一个jQuery .load方法在SearchSingular控制器中调用Search操作时焦点来自HTML元素{{1 }}。这很有效，但id = textBox动作执行有时可能需要一段时间才能完成。

因此，我想在负载未完成时显示加载图像。有没有办法做到这一点？

Answer 1

将其变为回调

// Somecode to display a image

$("#commentDiv").load("../Search/SearchSingular?phrase=" + phrase, function() {
  // Somecode to remove image
});

Answer 2

您可以在加载div内容时使用加载图像

("#loadingImage").show();
$("#commentDiv").load("../Search/SearchSingular?phrase=" + phrase, function(){

  $("#loadingImage").hide(); // hide the image after loading of div completes

});

为您的加载图片划分

<div id="loadingImage">
 <img src="loader.gif">
</div>

Answer 3

jQuery complete函数有一个.load回调（阅读更多http://api.jquery.com/load/）

你可以修改你的javascript如下：

<script>
  $(document).ready(function () {
    $("#textBox").focusout(function () {
      var phrase= $("#textBox").val();
      phrase= phrase.replace(new RegExp(/\s+/, 'g'), "%20");
      ShowLoading();
      $("#commentDiv").load(
        "../Search/SearchSingular?phrase=" + phrase,
        function () { HideLoading(); }
      );
    });
  });
</script>

如何在Action完成之前显示加载图像ASP.Net MVC 5

3 个答案: