Question

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

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

enter image description here

我确定这可能很容易，但我无法找到有关如何操作的任何信息。任何帮助或指示将不胜感激。

问题陈述： -

下面是我的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);
});

希望这对你有所帮助。注意：替换＆＃34; img / loading.gif＆＃34;与你想要使用的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 个答案: