JQuery и AJAX Загрузка

Question

Я создаю страницу, на которой при нажатии на «историю» загружается текст и мультимедиа для этой истории, у меня появляется отдельный PHP-скрипт для загрузки текста истории и мультимедиа (видео или изображения). оба скрипта работают и на самом деле все это работает.

Моя проблема в том, что когда вы щелкаете статью, она должна загрузить текст, а затем сдвигать носитель вниз при загрузке. Однако он сдвигается вниз, даже когда текст все еще загружается.

Газета.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);
    }
});

По сути, я хочу, чтобы медиа-элемент скользил вниз только после завершения загрузки видео или изображения.

Спасибо

Answer 1

Я бы использовал что-то вроде этого:

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);
  });
}

Answer 2

Что делает ваш mediaLoader.php скрипт? Он просто проверяет базу данных, есть ли какие-либо медиа записи для данной истории, и если да, то правильно их форматируйте и выводите? Потому что в настоящее время я не думаю, что вы можете скользить вниз после полной загрузки видео, так как вы встраиваете контейнер видео vimeo, который обрабатывает загрузку самого видео, и у вас нет к нему доступа ...

Answer 3

Вам необходимо использовать функцию обратного вызова 'on complete' при первой анимации.

Посмотрите jQuery API документацию для .fadeIn ()

Это должно выглядеть примерно так:

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

Answer 4

Ваш запрос асинхронный. Это означает, что скрипт не будет ждать загрузки данных перед выполнением бита эстетики. Вам нужно добавить async: false к вашему вызову $ .ajax (посмотрите другие варианты в документации по jQuery). Таким образом, браузер будет ожидать поступления данных, прежде чем выполнять остальную часть JS.