Question

如何在每个页面加载和ASP.NET MVC应用程序中的每个AJAX请求上显示加载图像？此外，仅当页面在2秒内未加载时才会显示图像。对此的任何帮助都非常感谢。

Answer 1

在ajax请求中显示加载图片： -

只需在页面中的任意位置创建一个div：

<div style="display:none" id="loading"><img src="~/Images/Busy-loading.gif" style="width:50px;height:50px" /></div>

Jquery代码：

jQuery.fn.center = function () {
        this.css("position", "fixed");
        this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
        this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
        return this;
    }  //this function will display loading div at center of the page 


  function ajaxcall()
  {
    $("#loading").show();
    $.ajax({
            url: "/MyController/getdata",
            type: 'GET',
            datatype: 'html',
            data: { },
            success: function (data) {
               $("#div1").html('');
               $("#div1").html(data);
             }
          $("#loading").hide();
        });
  }

在页面加载时显示加载图片： -

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Show Loading Image while Page loading</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
  $(window).load(function() {
  $("#pageloaddiv").fadeOut(2000);
  });
</script>
<style type="text/css">
 #pageloaddiv {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: url('pageloader.gif') no-repeat center center;
   }
</style>
</head>
<body>
<div id="pageloaddiv"></div>
</body>
</html>

如何在每个页面加载和ASP.NET MVC应用程序中的每个AJAX请求上显示加载图像？

1 个答案: