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

对我的ajax代码有问题。我有一些链接和内容区域。当我点击链接时，我隐藏了内容区域，加载新数据并再次显示内容区域。它可以工作，但是当显示内容区域时，您会在短时间内看到旧内容，然后闪烁到新内容。JQuery 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; 

});

});

我从this source

感谢这个Ajax代码提前！

来源

2010-06-04 madmax

你可以尝试发出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()方法建立的动作队列。然后，当用户点击另一个链接，而其中一个已经加载时，很容易取消。

来源

2010-06-04 15:28:07 MvanGeest

非常感谢！完美的作品。我也会看看队列！但我仍然有一个问题。此滑出效果只能使用一次，滑出不起作用。新内容刚刚弹出... – madmax 2010-06-04 18:13:02

您可以在www.jsfiddle.net上创建一个工作示例并发布该URL吗？这可能使我们能够告诉你更多。 – MvanGeest 2010-06-04 18:16:10

发现它在一个简单的html上工作。但我在Magento中使用它，并在我加载内容后，滑动功能不再工作。如果所有函数在加载后都不起作用，我会更加了解它，但它只是动画。正在加载... 也许与Magento中的Prototype有冲突？但我使用noconflictmode jQuery ... – madmax 2010-06-04 20:52:40

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

回答

相关问题