Question

我有这个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秒就会刷新后台内容。每次刷新时如何显示某种加载图像？

Answer 1

这个怎么样：

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

2）使用.load（https://api.jquery.com/load/）的回调函数在加载完成后删除该加载图像。

Answer 2

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

http://jsfiddle.net/j5sZc/

HTML

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

JS

$(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.
});

在jquery刷新上显示加载

2 个答案: