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

我有一些jQuery代码工作，重新加载div每个10 seconds而无需重新加载整个页面。但是，目前，用户在刷新时没有看到浏览器上发生任何事情。如何在ajax刷新调用期间显示刷新指示灯？

我知道在互联网上有成千上万的例子，但我想要的脚本我已经必须显示一个加载gif图像，而当数据被检索到时，每隔10秒发生一次刷新，用户应该看到一些像这样的刷新图像 -

enter image description here 。

我确定这可能很简单，但我找不到任何有关如何操作的信息。任何帮助或指针将不胜感激。

问题陈述： -

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

<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>

现在下面是我使用加载div container每30秒的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并显示刷新图像如上图所示，一旦刷新完成，然后显示正常的结果，然后刷新图像也将消失..

这是可能在我目前的例子吗？

来源

2014-03-12 AKIWEB

我看你已经在使用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

来源

2014-03-12 20:16:10 adearriba

谢谢。因此，以您的示例，我应该删除我的jquery电话吗？只用你的？我对么？ – AKIWEB

是的，多数民众赞成在正确:)抹去所有，并用此代码替换它。请给我一些关于你的投票的爱。 – adearriba

它用'dataInfo.jsp'替换'data.html'后可以正常工作..但是有一个问题。正如你所看到的，我还有其他的div。我也有页眉和页脚div。因此，目前发生的事情是，用你的代码，当它刷新容器div时，它会附加所有其他div并刷新后，我可以在浏览器上看到多个div附加在一起。不知道如何解决它..任何想法？ – AKIWEB

当您启动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({ 
    type: "GET", 
    url: "dataInfo.jsp", 
    success: function(data) { 
     $('.container').html(data).fadeIn("slow"); 
    }, 
    complete: function() { 
     $('#ajaxLoad').remove(); 
    } 
});

：

然后就可以开始Ajax调用。即使服务器返回错误代码或查询超时，完整运行也是如此。

来源

2014-03-12 20:09:40 lionel

感谢lionel，在你的例子中，它会加载整个'dataInfo.jsp'页面，这意味着其他div也会被追加。我如何只在每次刷新后加载容器div以避免div被追加。 – AKIWEB

这将是最好的从服务器中检索文本只需要的部分。但是，如果它不可能，也许你可以在'success'函数中用jquery解析响应：'data = $（data）.find（'。content'）。html（）;'。 – lionel

你可以看看这个：jsFiddle

我以前<i class="fa fa-refresh fa-spin"></i> fontawesome图标，显示刷新符号... 这是实现的途径之一你想要什么......

来源

2014-03-12 20:20:27 Siva

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

回答

相关问题