强制浏览器立即重绘 dom 元素

我需要将一个巨大的 html 标记插入到某个 dom 元素中，这将需要一段时间。这就是我想显示一些预加载器指示器的原因。我有两个块：#preloader 和#container。一些代码首先显示预加载器，然后开始粘贴大的 html 标记。

问题 - 预加载器在浏览器无法完成渲染 html 标记之前才真正显示。我尝试了很多解决方案（其中很多都被描述here http://www.eccesignum.org/blog/solving-display-refreshredrawrepaint-issues-in-webkit-browsers）但仍然没有成功。

下面是一个示例：https://jsfiddle.net/f9f5atzu/ https://jsfiddle.net/f9f5atzu/

<div id='preloader'>Preloader...</div>
<div id='container'>Container...</div>

#preloader {
  display: none;
  background-color: #f00;
  color: #fff;
  hight: 100px;
  text-align: center;
  padding: 10px 20px;
}

#container {
  background-color: #ccc;
}


setTimeout(function() {
  // Define variables
  let domPreloader = document.getElementById('preloader');
  let domContainer = document.getElementById('container');
  const html = Array(100000).fill("<div>1</div>");

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

  // Render a big html
  domContainer.innerHTML = html;
}, 1000);

问题有解决办法吗？

按照您的方式，您不会在预加载器的显示和“大 html”的显示之间将控制权释放给浏览器。

而不是将整个块封装在setTimeout()，你应该只是改变渲染部分。

请尝试一些类似的事情：

// 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 https://jsfiddle.net/Arnauld/guppbn6f/1/