Почему на мобильном устройстве при нажатии на ссылку сразу происходит загрузка новой страницы без выполнения JQuery?

Question

[kkolorid]

Хочу сделать прелоадер для Web App Telegram. При загрузке страницы все работает, прелоадер появляется и уходит в нужный момент. Захотелось закрыть еще и бесмысленное ожидание закрытия страницы, на которой был совершен клик, потому что при нажатии на ссылку интуитивно не понятно, начал ли какой-то процесс происходить во фрейме. Написал примерно такой код:

$(function () {
        $('a').click(function() {
          $(".loader_inner").fadeIn();
          $(".loader").delay(200).fadeIn("slow");
        });
      });
      $(window).on('load', function() {
        $(".loader_inner").fadeOut();
        $(".loader").delay(400).fadeOut("slow");
      });

В дескоп браузере все хорошо работает, прелоадер появляется, страница перезагружается, начиная снова с него же и он пропадает. Но в мобильном браузере и в Веб Аппе телеграма первый сценарий не отрабатывает. Страница также тупит некоторое время в ожидании следующей уже с прелоадером. Проверял, срабатывает ли вообще сценарий нажатия - срабатывает, я выводил alert с кнопкой ОК. В чем может быть дело?

Answer 1

[Семён Окулов]

Возможно, проблема в том, что в мобильных браузерах и в Web App Telegram код события клика на ссылке выполняется асинхронно. Из-за этого прелоадер не успевает отобразиться перед переходом на следующую страницу.

Вы можете вмешаться в процесс отправки формы или перехода по ссылке, чтобы показать прелоадер перед переходом. Для этого вы можете использовать событие отправки формы ($('form').submit(...)) или метод window.location.href для перехода по ссылке.

Пример кода для реализации этой идеи может выглядеть так:

$(function() {

        $('a').click(function(event) {
          event.preventDefault(); // Отменяет переход по ссылке
          var url = $(this).attr('href');
          $(".loader_inner").fadeIn();
          $(".loader").fadeIn();
          setTimeout(function() {
            window.location.href = url; // Переход по ссылке после отображения прелоадера
          }, 400); // Задержка, чтобы прелоадер успел отобразиться
        });
      });
      
      $(window).on('load', function() {
        $(".loader_inner").fadeOut();
        $(".loader").delay(400).fadeOut("slow");
      });

UPD 31.05.23: Код обновлён

Comments

[kkolorid]

Спасибо за ответ. Но к сожалению, ощутимого результата не наблюдается. После нажатия видно, как появляется полоса ожидания ответа от следующей страницы, но эти пол секунды - секунду браузер просто тупит. Может есть хотя бы какая-то возможность выкрутиться из ситуации какими-то более штатными средствами html+css? Хотя бы дать пользователю понять, что его действите принято на обработку. Проблема в том, что если в браузере полоса появляется, и видно, что он что-то старается, пыхтит, а вот в фрейме веб аппа это интуитивно не понятно, можно подумать, что не реагирует.

[Семён Окулов]

kkolorid, можно добавлять какой-то loader, если я правильно вас понял

[kkolorid]

Семён Окулов, так мы это сейчас и пытаемся сделать. Или что-то я уже не правильно понял? Я имел ввиду может альтернативные есть варианты, раз с прелоадером не получается.

[Семён Окулов]

kkolorid, а ой, перепутал вопросы. Средствами ванильного html и css такого результата добиться нельзя.

Что-то такое не подойдут?

<div class="loader"></div>

.loader {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  animation: spin 2s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

$(function() {
  $('form').submit(function() {
    showLoader();
  });

  $('a').click(function(event) {
    event.preventDefault(); // Отменяет переход по ссылке
    var url = $(this).attr('href');
    showLoader();
    setTimeout(function() {
      window.location.href = url; // Переход по ссылке после отображения прелоадера
    }, 200); // Задержка, чтобы прелоадер успел отобразиться
  });

  function showLoader() {
    $(".loader").fadeIn("slow");
  }

  $(window).on('load', function() {
    $(".loader").fadeOut("slow");
  });
});

[kkolorid]

Семён Окулов, хмм, такой вариант работает! Спасибо! Не понятно тогда, почему не работал вариант с полным закрытием окна?

[kkolorid]

Семён Окулов, и не очень теперь стабильно событие load отрабатывает. Крутится постоянно после загрузки уже.

[Семён Окулов]

kkolorid, можно дополнительно отслеживать загрузку, чтобы лоадер уходил

Добавил isLoading

$(function() {
  let isLoading = false;

  $('form').submit(function() {
    showLoader();
  });

  $('a').click(function(event) {
    event.preventDefault();
    let url = $(this).attr('href');
    showLoader();
    setTimeout(function() {
      window.location.href = url;
    }, 200);
  });

  function showLoader() {
    if (!isLoading) {
      isLoading = true;
      $(".loader").fadeIn("slow");
    }
  }

  function hideLoader() {
    if (isLoading) {
      isLoading = false;
      $(".loader").fadeOut("slow");
    }
  }

  $(window).on('load', function() {
    hideLoader();
  });
});

Должно помочь

[kkolorid]

Семён Окулов, потыкался я вообщем и понял, кажется, в чем суть проблемы. Решающим фактором стало значение таймаута. В итоге оставил все свои старые стили, но js принял такой вид:

$(function() {

        $('a').click(function(event) {
          event.preventDefault(); // Отменяет переход по ссылке
          var url = $(this).attr('href');
          $(".loader_inner").fadeIn();
          $(".loader").fadeIn();
          setTimeout(function() {
            window.location.href = url; // Переход по ссылке после отображения прелоадера
          }, 400); // Задержка, чтобы прелоадер успел отобразиться
        });
      });
      
      $(window).on('load', function() {
        $(".loader_inner").fadeOut();
        $(".loader").delay(400).fadeOut("slow");
      });

именно с задержкой в 400 лоадер успевает полностью появиться, иначе он появлявется наполовину и страница успевает уйти в тупняк. Увеличил 200 до 400, что на скорость в принципе не влияет, зато смотрится теперь все сильно плавно и чотко. Спасибо!

[Семён Окулов]

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