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

Question

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

问题 - 直到浏览器无法完成呈现 html 标记，预加载器才真正显示。我已经尝试了很多解决方案(其中很多都被描述为 here )但仍然没有成功。

下面是一个例子: 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);

这个问题有什么解决方案吗？

Answer 1

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

与其将整个 block 封装在 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