我需要向某个 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);
这个问题有什么解决方案吗?
最佳答案
按照您的方式,您不会在预加载器的显示和“大 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';
}
关于javascript - 强制浏览器立即重新绘制 dom 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38724180/