Могу ли я обновить DOM во время загрузки данных XHR? - PullRequest
Новая
       46

Могу ли я обновить DOM во время загрузки данных XHR?

0 голосов
/ 03 июля 2018

Я использую Slick JS для создания слайдера, добавляя к нему слайды, используя AJAX и метод slickAdd следующим образом: 

$.getJSON(url, function(r) {
  $.each(r, function(i, article) {
    var html = 'HTML string created with data and ' + article.variables +  ' from JSON';
    $('.element').slick('slickAdd', html);
  }
}

Этот AJAX работает, и слайды успешно добавляются в слайдер после того, как в браузере есть все данные XHR.

Тот факт, что это слайдер Slick JS, просто контекст; Я считаю, что вопрос более общий, чем этот.

Основной вопрос: Могу ли я заставить цикл each выводить html, пока данные XHR все еще загружаются AJAX, таким образом предоставляя пользователю более эффективный сайт в виде слайдов добавлены в DOM как можно быстрее? Если да, то как?

Пока функция проходит по циклу «каждый», я вижу отдельные данные XHR для каждого возвращаемого элемента, и в идеале я хотел бы начать добавление в DOM (с задержкой) до завершения всех итераций.

Сайт в основном PHP, поэтому, если на самом деле не существует "чистого" способа справиться с этим в JS / jQuery на внешнем интерфейсе, я могу сделать что-то на стороне сервера с PHP ob_flush, но просто хотел Сначала попросите несколько предложений / критических замечаний для мастеров JS.

Мне не нужен полный пример кода, просто объяснение высокого уровня - я немного новичок с JS.

Большое спасибо; P

1 Ответ

0 голосов
/ 10 июля 2018

TL: DR; Не с одного запроса.

Если вы будете использовать базовый объект XMLHttpRequest для выполнения запроса AJAX, вы сможете получать обновления по мере того, как данные возвращаются с сервера, и потенциально выполнять обновления во время загрузки данных.

Однако очевидная проблема с этим заключается в том, что JSON не будет действительным, пока он не будет полностью загружен. Хотя вы можете разобрать его вручную, вряд ли это стоит усилий.

Единственный обходной путь, который вы хотите сделать, - это отправлять отдельные запросы для каждого блока данных и обрабатывать их отдельно.

...