Question

我的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').load(toLoad,'',showNewContent())  
}  
function showNewContent() {  
    jQuery('#ajax_content').show('normal',hideLoader());  
}  
function hideLoader() {  
    jQuery('#load').fadeOut('normal');  
}  
return false;  

});

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

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

JQuery Ajax：旧内容在显示加载的内容之前轻弹

1 个答案: