我在一个面板中有一个以引导程序为主题的广告。我有3个进度条,我想每3秒更新一次。我已经设法用另一个页面的内容更新了它们,这就是我想做的。现在它们全天候更新,当它每3秒闪烁一次并且保持不变时,这很烦人。我只是想知道是否有一种方法只有在其他页面的内容发生变化时才能更新?
编辑:有没有办法让它更新得更好?而不仅仅是闪烁?也许会慢慢消失。
以下是我迄今为止所尝试的。。。。
<script type="text/javascript">
(function($)
{
$(document).ready(function()
{
$.ajaxSetup(
{
cache: false,
beforeSend: function() {
$('#nav_bar_top').hide();
$('#loading').show();
},
complete: function() {
$('#loading').hide();
$('#nav_bar_top').show();
},
success: function() {
$('#loading').hide();
$('#nav_bar_top').show();
}
});
var $container = $("#nav_bar_top");
$container.load("http://mywebsite.com/assets/ajax/get_bar.php");
var refreshId = setInterval(function()
{
$container.load('http://mywebsite.com/assets/ajax/get_bar.php');
}, 3000);
});
})(jQuery);
</script>
我不会循环ajax,而是使用回调发出新的调用。
例如
var content = "";
var $container = $("#nav_bar_top");
loadIt();
其中
function loadIt() {
$.get("http://mywebsite.com/assets/ajax/get_bar.php",function(data) {
if (content != data) {
$container.html(data);
content=data;
}
setTimeout(loadIt,3000);
});
}
要淡入淡出,请尝试
if (content != data) {
$container.fadeout("slow",function() {
content=data;
$this.html(data);
$this.fadein(slow);
});
}