暂停jquery函数以等待ajax内容加载后再继续

Question

我有一个脚本，可以根据用户单击的链接将一些html加载到div中。我正在尝试为此事件创建淡入淡出类型的动画。这是我正在使用的代码：

var loadInit = $('.thumbs a:first').attr("href");        
$('#loadTarget').load(loadInit);

$('.thumbs a').click(function(){
    var toLoad = $(this).attr('href');
    $('#loadTarget').hide('slow',loadContent);

    function loadContent() {
        $('#loadTarget').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('#loadTarget').show('slow');
    }
    return false;
});

我要做的是暂停脚本，直到loadContent函数完全加载了与之关联的html和图像。由于第一个内容被隐藏并且新内容被加载，我得到了这种烦人的闪光。有任何想法吗？？

Answer 1

jQuery加载具有一个回调函数，该函数在加载完成时被调用：

$('#loadTarget').load(loadInit, function(response) {
    alert('complete!  Returned: ' + response);
});

http://api.jquery.com/load/

加成：

function loadContent() {
$('#loadTarget').load(toLoad,'',showNewContent()) //Wrong.
}

当您调用时showNewContent()，该命令立即执行。相反，您要做的是通过排除()。传递指向函数的指针。

function loadContent() {
$('#loadTarget').load(toLoad, showNewContent) //Right :)
}

这就是导致您showNewContent立即拨打电话时闪烁的原因。