Question

我已经尝试了两个css动画微调器和javascript动画微调旋转，直到$（window）.load（）触发。但是，由于我的document.ready函数中的密集js，动画不断被中断。我目前的实施如下：

<div id="spinner"></div>
<script>
  $("#spinner").css("top",$(window).height()/2-50);
  $("#spinner").css("left",$(window).width()/2-50);
  var opts = {
  lines: 13, // The number of lines to draw
  length: 20, // The length of each line
  width: 10, // The line thickness
  radius: 30, // The radius of the inner circle
  corners: 1, // Corner roundness (0..1)
  rotate: 0, // The rotation offset
  direction: 1, // 1: clockwise, -1: counterclockwise
  color: '#000', // #rgb or #rrggbb or array of colors
  speed: 1, // Rounds per second
  trail: 60, // Afterglow percentage
  shadow: false, // Whether to render a shadow
  hwaccel: false, // Whether to use hardware acceleration
  className: 'spinner', // The CSS class to assign to the spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  top: 'auto', // Top position relative to parent in px
  left: 'auto' // Left position relative to parent in px
   };
  $("#spinner").css("display","inline-block");
  target = document.getElementById('spinner');
  spinner = new Spinner(opts).spin(target);
</script>

如果使用css动画微调器，我会遇到类似的问题。我也尝试了一个动画gif图像同样的效果。最后，据我所知，使用webworker无济于事，因为无法从webworker访问主线程的DOM。有什么建议吗？

Answer 1

你是正确的，无法从网络工作者那里访问DOM。 ITSELF密集型任务是否有必要访问DOM？

问题是您的密集型任务正在同步运行，阻止UI线程更新。除了网络工作者之外，唯一的解决方案是分批运行您的密集型任务，并在批次之间留出一些时间。我建议在允许DOM更新之前运行任务不超过50毫秒，这可以很简单地完成：

function runTask() {
    // run for 50 ms
    setTimeout(runTask, 1); // Allow DOM-update
}

它可能仍然无法顺利运行，在这种情况下，您必须不断减少任务在两次DOM更新之间运行的ms量。不理想，但不幸的是你必须通过一个线程来实现：（

如何使页面加载微调器顺利旋转？

1 个答案: