Question

我需要在某个dom元素中插入一个巨大的html标记，这需要一段时间。这是我想要显示一些预加载器指示器的原因。我有两个块：#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'的显示之间向浏览器释放控制权。

不是将整个块封装在// 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'; }中，而应该只是渲染部分不同。

请尝试这些方法：

////- First Canvas -/////
var canvas1 = new fabric.Canvas('first');

//Added circle to first canvas
var circle = new fabric.Circle({
  left: 20,
  top: 10,
  radius: 50,
  fill: "#299b71"
});
canvas1.add(circle);

$("#save-first").click(function() {
  window.open(canvas1.toDataURL('png'));
});

////- Second Canvas -/////

var canvas2 = new fabric.Canvas('second');

//Added img to second canvas
fabric.Image.fromURL("http://www.socialmediatoday.com/sites/default/files/post_main_images/alltwitter-twitter-bird-logo-white-on-blue_9.png", function(oImg) {
  canvas2.add(oImg);
});

$("#save-second").click(function() {
  window.open(canvas2.toDataURL('png'));
});

JSFiddle

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

1 个答案: