Завершение анимации jQuery при выгрузке страницы

Question

Есть ли способ выполнить анимацию jQuery до того, как пользователь уйдет со страницы, щелкнув ссылку или нажав кнопки «назад / вперед».

Похоже, что выполнение анимации в ответ на событие unload обязательно охватит все условия, при которых пользователь может покинуть страницу.

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

Кроме того, я мог бы перехватывать щелчки на якорях. Но это не учитывает клики назад / вперед и, возможно, другие условия, при которых пользователь будет уходить со страницы.

Да, я понимаю, что этот тип поведения не одобряется, потому что он заставляет пользователя ждать. Тем не менее, я пытаюсь сделать это в очень специфической ситуации, в которой, я считаю, плюсы перевешивают минусы.

Answer 1

Событие onbeforeunload документа не подходит для того, о чем просит Дэвид.

В противоположность обычным событиям (и тому, что говорит ajm), возвращение логического значения не влияет на это событие. Возвращение false не блокирует навигацию и не может быть предотвращено по умолчанию.

Браузеры выполняют обработчик событий, поэтому любой синхронный код, запускаемый внутри, может практически задержать переключение страницы, однако выполнение каких-либо асинхронных операций (таких как анимация jQuery) невозможно и просто не будет выполняться, так как только функция заканчивается, страница убивается и начинается запрос следующей страницы.

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

См. Также Документация MDN для window.onbeforeunload . В Firefox 4+ есть ошибка.

---

Абстрагирование от реализации обратно к практической цели: показать анимацию между загрузками страниц. Несколько возможностей, которые, вероятно, имеют массу отдельных вопросов и руководств по SO в Интернете:

• Используйте AJAX для загрузки контента

  При каждом щелчке по внутренней ссылке отображается значок загрузчика, запускается AJAX-запрос на содержимое другой страницы. В то же время, когда по-прежнему показывается старый контент, лучше продолжать показывать его со спиннером вверху, чем показывать пустую страницу только со спиннером. В обратном вызове ajax создайте свою причудливую анимацию для элемента содержимого (например, jQuery slideUp ()), затем поменяйте содержимое новым содержимым, скройте спиннер и выполните следующую причудливую анимацию (например, jQuery slideDown ()).

• Перехватить теги привязки и перенаправить вручную

  Работать с AJAX все хорошо, но если вы не хотите этого делать, вы также можете попробовать обойти ограничение onbeforeunload: вместо того, чтобы задерживать onbeforeunload, убедитесь, что событие не было вызвано в первую очередь. Привяжите делегированное событие ко всем тегам привязки на вашей странице и предотвратите дефолт (или верните false), чтобы браузер не переходил по ссылке. Затем выполните анимацию и в обратном вызове выполните навигацию вручную, установив window.location для URL-адреса из атрибута href атрибута щелкающего тега.

Answer 2

Как быстро пользователь переключает веб-страницы с помощью своего браузера, это не под вашим контролем, а только функции на вашей странице.

С новым слушателем события jQuery 1.3 live () вы можете добавить прослушиватель для всех привязок, как вы предлагали, даже для всех новых привязок, созданных после объявления прослушивателя:

$("a").live("click", function(){
  var href = $(this).attr("href");

  var animDuration = 1000;

  // Do animation here; duration = animDuration.

  setTimeout(function () {
    window.location = href;
  }, animDuration);

  return false; // prevent user navigation away until animation's finished
});

Answer 3

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

onbeforeunload блокирует навигацию по страницам до тех пор, пока ваш код не вернет логическое значение (true для навигации, false для досадно блокирующего навигацию), так что вам просто понадобится код анимации, чтобы в конечном итоге вызвать логическое значение по завершении.

Нет необходимости отслеживать ссылки вообще.