在 jquery 刷新时显示加载答案

【问题标题】：show loading on jquery refresh在 jquery 刷新时显示加载
【发布时间】：2014-04-30 21:25:36
【问题描述】：

我有这个 JQuery 代码，它每 X 秒将一个 php 文件加载到一个 div 中

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('.container').load('dashboard.php');
}, 10000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]></script>

<div class="container"><h3>Loading Dashboard...</h3></div>

当加载开始时，它会显示 Loading Dashboard 文本，但每隔 X 秒它只会刷新背景中的内容。每次刷新时如何显示某种加载图像？

【问题讨论】：

使用加载指示器作为容器的背景，然后将其隐藏在load 回调中。

标签： javascript jquery html

【解决方案1】：

这个怎么样：

1) 在 setInterval 函数的最顶部，在执行加载之前，将该容器类的背景设置为加载图像（或者您希望显示它）。

2) 加载完成后，使用 .load (https://api.jquery.com/load/) 的回调函数移除加载图片。

【讨论】：

【解决方案2】：

这是一个说明你应该采取的方向的小提琴......

http://jsfiddle.net/j5sZc/

HTML

<div class="wrapper">
    <h3 class="loader">Loading Dashboard...</h3>
    <div class="container"></div>
</div>

$(document).ready(function() {

    $.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh

    var $loader = $(".loader"), // cache references to loader and container
        $container = $(".container");

    setInterval(function() {
        $loader.show(); // show loader when request is initialized
        $container.empty().load('dashboard.php', function(){
            $loader.hide(); // hide loader once new content is loaded
        });
    }, 10000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});

【讨论】：