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

【问题标题】：How to make page-load spinner spin smoothly?如何使页面加载微调器顺利旋转？
【发布时间】：2014-01-17 10:44:41
【问题描述】：

我已经尝试过 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。有什么建议吗？

【问题讨论】：

标签： javascript jquery performance spinner

【解决方案1】：

您是正确的，无法从 webworker 访问 DOM。密集型任务 ITSELF 是否需要访问 DOM？

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

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

它可能仍然无法像您希望的那样顺利运行，在这种情况下，您必须不断减少任务在两次 DOM 更新之间运行的毫秒数。不理想，但不幸的是你必须用一个线程来完成:(

【讨论】：