Задать вопрос
@kkolorid

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

Хочу сделать прелоадер для 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 с кнопкой ОК. В чем может быть дело?
  • Вопрос задан
  • 113 просмотров
Подписаться 1 Средний Комментировать
Решения вопроса 1
scoffs
@scoffs
Fullstack | C# | Student
Возможно, проблема в том, что в мобильных браузерах и в 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: Код обновлён
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы