Force browser to immediately repaint a dom element

Question

I need to insert a huge html markup to some dom element which will take awhile. It is a reason why I want to display some preloader indicator. I have two blocks: #preloader and

Answer 1

The way you did it, you're not releasing control to the browser between the display of the preloader and the display of the 'big html'.

Rather than encapsulating this whole block inside a setTimeout(), you should just differ the rendering part.

Please try something along those lines:

// Define variables
let domPreloader = document.getElementById('preloader');
let domContainer = document.getElementById('container');

// Display preloader
domPreloader.style.webkitTransform = 'scale(1)';
domPreloader.style.display = 'block';

// Render a big html
setTimeout(render, 100);

function render() {
  const html = Array(100000).fill("<div>1</div>");
  domContainer.innerHTML = html;

  // Hide preloader
  domPreloader.style.display = 'none';
}

JSFiddle