javascript - jQuery Ajax : Old content flicks in before showing the loaded content

Question

我的 ajax 代码有问题。 我有一些链接和内容区域。 当我单击链接时，我隐藏内容区域，加载新数据并再次显示内容区域。它可以工作，但是当显示内容区域时，您会看到一小段时间旧内容，然后闪烁到新内容。

我可以以某种方式让加载屏幕显示更长时间吗？ 此外，隐藏功能仅在我第一次使用链接时有效。

jQuery(文档).ready(function() {

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

var toLoad = jQuery(this).attr('href');
jQuery('#ajax_content').hide('慢',loadContent);
jQuery('#load').remove();
jQuery('#main').append('正在加载...');
jQuery('#load').fadeIn('正常');

函数加载内容(){
    jQuery('#ajax_content').load(toLoad,'',showNewContent())
}
函数显示新内容(){
    jQuery('#ajax_content').show('正常',hideLoader());
}
函数 hideLoader() {
    jQuery('#load').fadeOut('正常');
}
返回假；

});

});

我有来自this source的ajax代码

提前致谢!

Answer 1

您可以在发出 AJAX 检索命令之前尝试清空内容元素:

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() 方法来构建操作队列。然后，当用户在一个链接已经加载时单击另一个链接时，很容易取消。