@Galka32

Как сделать синхронную подгрузку фоновой картинки при ajax-запросе?

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

Таблицу заполняю из БД.

<table>
      <tr>
        <th>Дата</th>
        <th>Сборщик</th>
        <th>Сервер</th>
        <th>Сумма</th>
        <th>Загрузить</th>
      </tr>
      <tr>
        <td>12.05.2018</td>
        <td>Сбербанк</td>
        <td>Сельцовский</td>
        <td>3600</td>
        <td><input type='checkbox' value='2_5' checked></td>
      </tr>
      <tr>
        <td>16.05.2018</td>
        <td>Платежный агент</td>
        <td>'Ивановский'</td>
        <td>5500</td>
        <td><input type='checkbox' value='3_3'></td>
      </tr>
      <tr>
        <td>22.06.2018</td>
        <td>Касса</td>
        <td>'Ивановский'</td>
        <td>3000</td>
        <td><input type='checkbox' value='3_2' checked></td>
      </tr>
    </table>

    <br>
    <input type='button' value='Старт' onclick="load();">


При нажатии кнопки "Старт" через ajax на сервер передаются параметры для загрузки оплаты по выбранным строкам. После нажатия на кнопку я
сразу меняю стиль оформления ячейки,ставлю фоновую картинку с бегунком, чтобы было видно, что загрузка в процессе, не зависла.

function load() {
      var result = {};

      var checkes = document.querySelectorAll("input[type='checkbox']");
      var arr = Array.prototype.slice.call(checkes, 0);
      arr.forEach(function(element, index) {
        if (element.checked) {
          var serv_oppl = element.value;
          var dt = element.parentElement.parentElement.childNodes[0].innerHTML;
          var res = dt + '_' + serv_oppl;
          result[res] = true;
          element.parentNode.classList.add('wait'); //меняем стиль оформления
          element.style.display = 'none'; //а сам чекбокс скрываем

        }
      });

      var par = Object.keys(result);

      par.forEach(function(elem) {
        loadProccess(elem);
      });
    }


Передача данных на сервер скрипту: (cкрипт возвращает в браузер строку вида "success('02.07.2018', 2_3, 1)" )

function loadProccess(param) {
      jQuery.post("loader.pl", 'param=' + param, function(data) {

        var y = document.createElement('script'); //Строка-ответ от сервера оборачивается в тег script и добавляется на страницу. 
        y.text = data;
        document.body.appendChild(y);
      });
    }


Как только скрипт на сервере отрабатывает, он в качестве ответа пересыпает строку с вызовом функции success , которая (в зависимости от успеха/неуспеха
загрузки) меняет стиль оформления ячейки на "успешный"(галка) или "ошибка"(крестик).

//Функция, которая меняет стили в зависимости от успеха/неуспеха загрузки,

function success(dt, servType, status) {
      var allInputs = Array.prototype.slice.call(document.querySelectorAll('input[value="' + servType + '"]'), 0);

      var target = allInputs.filter(function(elem) {
        return elem.parentNode.parentNode.children[0].innerHTML == dt;
      });


      var loadState = status ? 'success' : 'error';
      target.forEach(function(element) {

        element.parentNode.classList.add(loadState);
        element.parentNode.classList.remove('wait');
      });

    }

Стили:

.wait {
      background: url(img/progress.gif) no-repeat;
    }

    .success {
      background: #f6d654 url(img/success.png) no-repeat;
    }


Когда я загружаю 2-3 позиции из той верхней таблицы, то все отрабатывает коррекно. Но как только строк для загрузки 7 и более, получается
забавная картина: загрузка вроде как и прошла(бегунок прогресса изчезает, ведь мы же удалили у ячейки класс .wait), а галка об успешной загрузке
не появляется, хотя цвет ячейки сразу меняется. Галка об успешной загрузке появляется позже по времени сразу у нескольких строк, которые успели к
этому времени загрузиться.Т.е. получается, что эта галка как бы отстает, загрузка уже прошла, а она появляется гораздо позже, секунды на 4-5 и не
последовательно, а у кучи сразу.

Вопрос: как мне избавиться от такого рассинхрона? Или может я не совсем верно использую ajax при передачи параметров на сервер?
  • Вопрос задан
  • 99 просмотров
Решения вопроса 1
Так есть link preload
<link rel="preload" href="image.jpg" as="image">
<!-- Можно с брейкпоинтом -->
<link rel="preload" href="image.jpg" as="image" media="(min-width: 1024px)">
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@imhuman
Самое простое где-то на странице сделать тег img с нулевыми размерами и заранее загрузить картинку в него. Так как цвет меняется в нужное время, значит класс применяется корректно, проблема только в поздней загрузке картинки
Ответ написан
Комментировать
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы