jQuery和AJAX加载

我正在制作一个页面，当您点击一个“故事”时，它会加载该故事的文本和媒体，我为故事文本和媒体（视频或图像）提供了一个单独的PHP脚本，加载。这两个脚本的工作，实际上这一切工作。jQuery和AJAX加载

我的问题是，当您单击故事时，应该加载文本，然后在加载介质时向下滑动介质。但是，即使文本仍在加载，它也会滑落。

newspaper.nmyster.co.uk/是有问题的网站。点击左侧的vimeo故事，看看我的意思。

加载的故事和媒体的AJAX代码是：

$.ajax({ 
    url: './scripts/storyLoader.php?storyid='+storyId, 
    success: function(result){ 
    $('#storycontainer').hide(); 
    $('#loading').remove(); 
    $('#storycontainer').hide(0).html(result).fadeIn(1000); 
    } 
}); 
$.ajax({ 
    url: './scripts/mediaLoader.php?storyid='+storyId, 
    success: function(result){ 
    $('.martefact').hide(); 
    $('#loading').remove(); 
    $('.martefact').html(result).slideDown(1000); 
    } 
});

基本上，我只希望，一旦视频或图像完成加载媒体DIV滑下。

感谢

来源

2011-04-12 nmyster

人们以较慢的连接可能会觉得有什么不工作，如果他们必须等待。 – 2011-04-12 13:00:21

嗯......这是一个针对Uni的项目，所以我不必担心那个真的......我只是想为它做美学 – nmyster 2011-04-12 13:01:27

我会用这样的：

var requestHandle; 
function loadPage(url, vars) { 
    //cancel pending 
    if (requestHandle!=null) 
     requestHandle.abort(); 

    //load page.. 
    requestHandle = $.get(url, vars, function(data) { 
     $('#storycontainer').hide(); 
     $('#loading').remove(); 
     $('#storycontainer').hide(0).html(data).fadeIn(1000); 
    }); 
}

来源

2011-04-12 13:42:47

您的要求是异步的。这意味着脚本在执行美学位之前不会等待数据加载。您需要为$ .ajax调用添加async：false（在jQuery文档中查找其他选项）。这样，浏览器在执行其余的JS之前会先等待数据到达。

来源

2011-04-12 13:07:54

我认为成功函数只是在**一些数据之后调用**从服务器到达？ – 2011-04-12 13:10:45

尝试使用async：false，您会注意到不同之处。我很乐意解释发生了什么，但是现在我的时间有限，您可能想尝试谷歌成功功能和异步/同步呼叫的情况。 – 2011-04-12 13:25:16

我希望我得到了正确的结果，如果异步是错误的，代码执行将停止，直到数据到达，然后调用成功函数，但同时阻止其他所有事情！如果异步是真的，普通的代码执行将继续，但是一旦数据到达，成功函数将被调用...所以我不认为这真的是一个解决方案，@ nmyster你有没有尝试过？ – 2011-04-12 13:32:44

你的mediaLoader.php脚本是做什么的？它只是检查数据库中是否有给定故事的任何媒体条目，并且如果是这样，则正确格式化并输出它们？因为目前我不认为你可以在视频完全加载后滑下来，因为你正在嵌入一个vimeo视频容器，它处理视频本身的加载并且你无法访问它...

来源

2011-04-12 13:08:16

mediaLoader会，如果它的视频，获取视频的细节，然后嵌入它，我认为这可能是一个问题：/ – nmyster 2011-04-12 13:28:40

你需要在第一个动画上使用“完成”回调函数。

看一看jQuery api documentation for .fadeIn()

它应该是这个样子：

 
$('#book').fadeIn('slow', function() { 
    // Code to run after animation completed... 
});

来源

2011-04-12 13:15:38 Chris

jQuery和AJAX加载

回答

相关问题