如何在ajax刷新调用期间显示刷新指示器？

Question

我有一些jQuery代码，可以每10 seconds重新加载div，而无需重新加载整个页面。 但是，目前，刷新时用户看不到浏览器上发生任何事情。

我知道互联网上有成千上万个示例，但是对于脚本，我已经必须在每10秒刷新一次的同时检索数据时显示加载的gif图像，用户应该看到这样的刷新图像--

在此处输入图片说明。

我敢肯定这可能很容易，但是我找不到有关如何执行操作的任何信息。 任何帮助或指针将不胜感激。

问题陈述：-

以下是我的JSP文件(dataInfo.jsp)的div，我每10秒重新加载div container而无需重新加载整个页面。

<body>
    <div id='headerDivDash'>
        <h1 id='topHeaderDash'>
          <!-- some image here -->
        </h1>
    </div>
    <div id="vertical-list" style='display: block; list-style-type: none;'>
        <ul class="resp-tabs-list">
            <a href="_blank"><li>Test 1</li></a>
            <br />
            <a href="_blank"><li>Test 2</li></a>
        </ul>
    </div>

    <!-- just need to reload this div, other div should be intact without getting appended -->
    <div class="container">

    </div>
    <div class="footer">Some Value Here</div>
</body>

现在下面是我用来每30秒加载div container的jquery脚本，它工作正常。

<script type="text/javascript">
    $(document).ready(function(){
        var auto_refresh = setInterval(
        function ()
        {
        $('.container').html('');
        $('.container').load('dataInfo.jsp .container').fadeIn("slow");
        }, 10 * 1000);

    });
</script>

现在，如上所述，一旦刷新即将发生，我想将container div变灰，并显示如上所示的刷新图像，并在刷新完成后立即显示正常结果，然后刷新图像也将消失。

在我当前的示例中可以这样做吗？

Answer 1

我看到您已经在使用JQuery，因此此答案非常适合您。 您可以使用此代码创建灰色背景并显示加载图像。

// Create a refresh function:
function refresh(){
    // SHOW overlay
    $('#overlay').show();
    // Retrieve data:
    $.ajax({
        url: 'data.html',
        type: 'GET',
        success: function(data){
            // onSuccess take only the container content
            var content =  $($.parseHTML(data)).filter(".container"); 
            //Replace content inside the div
            $('.container').html(content);
            // HIDE the overlay:
            $('#overlay').hide();
        }
    });
}

$(document).ready(function(){
    // Create overlay and append to body:
    $('<div id="overlay"/>').css({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: $(window).height() + 'px',
        opacity:0.4, 
        background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
    }).hide().appendTo('body');

    // Execute refresh with interval:
    setInterval(refresh, 1 * 1000);
});

希望这对您有所帮助。 注意：将“ img / loading.gif”替换为要使用的gif的路由。

在这里，您可以使用代码： http : //jsbin.com/zizudexo/1/edit

Answer 2

当启动ajax请求时，将加载图像放置在结果容器上。

$('<div id="ajaxLoad"></div>').appendTo('.container');

添加此CSS规则以正确显示它：

#ajaxLoad {
    position: absoulte;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.5;
    background: silver url(my_image.png) no-repeat center center;
    z-index: 1000;
}

新增position: relative; 到.container 。

然后，您可以启动ajax调用：

$.ajax({
    type: "GET",
    url: "dataInfo.jsp",
    success: function(data) {
        $('.container').html(data).fadeIn("slow");
    },
    complete: function() {
        $('#ajaxLoad').remove();
    }
});

当数据到达时显示它，这就是成功的原因。 即使服务器返回错误代码或您的查询超时，完整程序也将运行。

Answer 3

你能看一下吗： jsFiddle

我使用了<i class="fa fa-refresh fa-spin"></i> fontawesome图标来显示刷新符号...这是实现所需目标的一种方法...

如何在ajax刷新调用期间显示刷新指示器？

问题描述

3 个解决方案

解决方案1
3 已采纳 2014-03-12 20:16:10

解决方案2
2 2014-03-12 20:09:40

解决方案3
1 2014-03-12 20:20:27

如何在ajax刷新调用期间显示刷新指示器？

问题描述

3 个解决方案

解决方案1 3 已采纳 2014-03-12 20:16:10

解决方案2 2 2014-03-12 20:09:40

解决方案3 1 2014-03-12 20:20:27

解决方案1
3 已采纳 2014-03-12 20:16:10

解决方案2
2 2014-03-12 20:09:40

解决方案3
1 2014-03-12 20:20:27