代码之家 › 专栏 › 技术社区 › madmax

jqueryajax:在显示加载的内容之前,旧内容会弹出

ajax jquery javascript

madmax · 技术社区 · 16 年前

我有一些链接和一个内容区。当我单击一个链接时,我隐藏了内容区域,加载了新的数据并再次显示了内容区域。它可以工作,但是当显示内容区域时,您会在短时间内看到旧内容,然后它会闪烁到新内容。

我能让加载屏幕长时间显示吗?

jQuery(document).ready(function() {

jQuery('.ajax').click(function(){  

var toLoad = jQuery(this).attr('href'); 
jQuery('#ajax_content').hide('slow',loadContent);  
jQuery('#load').remove();  
jQuery('#main').append('<span id="load">LOADING...</span>');  
jQuery('#load').fadeIn('normal');  

function loadContent() {  
    jQuery('#ajax_content').load(toLoad,'',showNewContent())  
}  
function showNewContent() {  
    jQuery('#ajax_content').show('normal',hideLoader());  
}  
function hideLoader() {  
    jQuery('#load').fadeOut('normal');  
}  
return false;  

});

});

我有来自 this source

提前谢谢!

1 回复 | 直到 16 年前

MvanGeest 16 年前

在发出AJAX retrieve命令之前,可以尝试清空内容元素:

jQuery(document).ready(function() {

jQuery('.ajax').click(function(){  

var toLoad = jQuery(this).attr('href'); 
jQuery('#ajax_content').hide('slow',loadContent);  
jQuery('#load').remove();  
jQuery('#main').append('<span id="load">LOADING...</span>');  
jQuery('#load').fadeIn('normal');  

function loadContent() {  
    jQuery('#ajax_content').empty().load(toLoad,'',showNewContent())  
}  
function showNewContent() {  
    jQuery('#ajax_content').show('normal',hideLoader());  
}  
function hideLoader() {  
    jQuery('#load').fadeOut('normal');  
}  
return false;  

});  

});

为了使应用程序更加健壮,还可以使用 .queue() 方法来构建操作队列。然后,当用户单击另一个链接,而其中一个已经加载,很容易取消。