Загрузка jQuery и AJAX

ProgramBox

Загрузка jQuery и AJAX

Post author:admin
Запись опубликована:26 мая, 2023
Post category:Вопросы по программированию

#php #jquery #ajax

Вопрос:

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

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

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

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

Спасибо

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

2. хммм… ну, это для проекта для университета, так что мне не придется беспокоиться об этом на самом деле … я просто хочу сделать это для эстетики

Ответ №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);
  });
}

Ответ №2:

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

1. Я думал, что функция успеха вызывается только после поступления некоторых данных с сервера?

2. Попробуйте использовать async: false, и вы заметите разницу. Я бы с удовольствием объяснил, что происходит, но на данный момент мое время ограничено, возможно, вы захотите попробовать поискать в Google, что происходит с функцией success и вызовами async / синхронизировать.

3. Надеюсь, я правильно понял, если значение async равно false, выполнение кода остановится до поступления данных, а затем вызовет функцию success, но в то же время заблокирует все остальное! Если значение async равно true, обычное выполнение кода продолжится, но функция успеха будет вызвана после поступления данных… так что я не думаю, что это действительно решение, @nmyster вы пробовали это?

Ответ №3:

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

Ответ №4:

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

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

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

$('#book').fadeIn('медленно', функция() {
 // Код для запуска после завершения анимации...
});