如何使頁面加載微調器順利旋轉？

我已經嘗試了兩個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。有什麼建議麼？

來源

2014-01-17 kempchee

你是正確的，無法從webworker到達DOM。密集任務ITSELF是否需要訪問DOM？

問題是您的密集型任務正在同步運行，阻止了UI線程的更新。除了網絡工作者，唯一的解決方案是分批運行你的密集任務，並在批次間留出一些時間。我會建議運行時間不超過50毫秒任務允許DOM更新，它可以很簡單地完成前：

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

它可能還沒有那樣順利，只要你想運行，在這種情況下，你必須繼續減少任務在兩個DOM更新之間運行的ms數量。不理想，但不幸的是，你必須使用單一線程：（

來源

2014-01-17 11:03:10

如何使頁面加載微調器順利旋轉？

回答

相關問題