Can I update DOM while XHR data is loading?

Question

I am using Slick JS to create a slider, adding slides to it using AJAX and the slickAdd method as follows:

$.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);
  }
}

This AJAX works and the slides are successfully added to the slider after the browser has all the XHR data.

The fact that it's a Slick JS slider is simply context; I believe the question is more generic than that.

Main Question: Can I force the each loop to output the 'html' while the XHR data is still being loaded by AJAX, thus giving the user the experience of a more performant site as slides are added to the DOM as quickly as possible? If yes, how?

While the funciton is looping through the 'each', I can see discrete XHR data for each item returned, and I ideally wanted to start adding to the DOM (with a delay) before all the iterations are complete.

The site is primarily PHP, so if there isn't really a "clean" way to handle this in JS / jQuery on the front-end, I can do something server side with PHP ob_flush, but just wanted to beg some JS masters (opinionated) suggestions/criticisms first.

I don't necessarilly need a full code example, just a high-level explanation - I am just a bit noob with JS.

Many thanks ;P

why so you have to do an xhr for each item? wouldn't it make more sense to get them all at once? This would help to increase the speed of building your slider the most (I think) — cloned, Jul 10 '18 at 10:23
xhr should have finished by the time each is called, you might just update the dom inside the loop? — Eddy Ma, Jul 10 '18 at 10:31

score 1 · Accepted Answer · answered Jul 10 '18 at 10:27

TL:DR; Not with a single request.

If you were to use the underlying XMLHttpRequest object to perform the AJAX request you would be able to get updates as the data is coming back from the server and potentially perform updates while the data is being loaded.

However, the obvious problem with doing this, is that the JSON won't be valid until it has been completely loaded. Although you could parse it manually, it's unlikely to be worth the effort to do so.

The only work-around to do what you want would be to send separate requests for each block of data and process them separately.

Doh! Thanks @phuzi. That makes sense - didn't think of that obvious fact re: JSON returned won't be valid until it's all processed. I think another approach (e.g. cacheing to localStorage) will be a better approach. — Rhecil Codes, Jul 10 '18 at 15:40

Can I update DOM while XHR data is loading?

1 Answers1