Функция "Загрузка", позволяющая загружать JS и заполнять формы в фоновом режиме

Я использую платформу автоматизации маркетинга (Eloqua), которая использует файлы cookie для отслеживания пользователей на нашем веб-сайте (или на нашем "микросайте" на их веб-сайте).

На странице, где мои клиенты могут задать свои почтовые предпочтения, у них есть javascript "Поиск веб-данных", который я могу использовать, чтобы получить cookie-файл пользователя, а затем извлечь данные из их профиля в базе данных. Затем я использую свой собственный добавленный JavaScript, чтобы затем заполнить форму, а также показать и скрыть определенные разделы на основе их данных.

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

Я хотел бы добавить немного JavaScript или jQuery для создания "загрузки" или какого-то подобного сообщения, пока все данные загружаются, формы заполняются, разделы скрываются / отображаются в фоновом режиме.

Есть идеи, с чего начать?

Источник

2 ответа

Решение

Есть несколько различных способов запретить множественные представления. Один из них - наложить полупрозрачный слой поверх страницы, как только будет выполнена первая отправка, а затем удалить его, как только запрос сервера вернется. Затем вы можете добавить своего рода "загрузочную" анимацию на эту страницу (анимированный GIF проще всего, но индикатор выполнения - это еще один, но гораздо более сложный вариант). Это предотвратит дальнейшие события, основанные на "щелчках". Если на странице есть мнемоника горячих клавиш, не забудьте отключить их.

Для этого создайте пустой div в нижней части страницы:

    <div id="waitOverlay"></div>

Вы можете вставить GIF внутри здесь или вы можете установить его с помощью CSS.

В css:

    #waitOverlay{
        display:none;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        background-color: black;
        opacity: 0.5;
        z-index: 500;
    }

При отправке формы перед запуском ajax (или каким-либо другим образом, с которым вы общаетесь с сервером)

    $('#waitOverlay').show();

Затем, после того как сервер вернется, запустите

    $('#waitOverlay').hide();

Это очень похоже на создание лайтбокса.

Источник

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

$('.button-class').prop("disabled", true);
$('.button-class').prop("value", "Loading...");

Затем, если у вас есть какой-то обратный вызов, когда все фоновые данные закончили загрузку, вызовите

$('.button-class').prop("disabled", false);
$('.button-class').prop("value", "Submit");
Источник
Другие вопросы по тегам