橢圓字加載屏幕

我想要做的是使加載屏幕顯示一些消息，並閃爍的省略號。它是這樣的，但更多的動畫：橢圓字加載屏幕

Crunching data. 
Crunching data.. 
Crunching data... 
Crunching data. 
Crunching data..

目前，我有以下的代碼，但它崩潰的網站，所以我會說這是公平的假設它不工作：

function loader(div) { 
    div.append('<div id="loader"></div>'); 
    load = div.find('#loader'); 
    load.html('Crunching Some Data.'); 
    numberOfPeriods = 1; 
    while($('#loader').length > 0) { 
    setTimeout(function() { 
     if(numberOfPeriods < 4) { 
     numberOfPeriods++; 
     for(var i=0; i<numberOfPeriods; i++) { 
      load.append('.'); 
     } 
     } else { 
     load.html('Crunching Some Data.'); 
     numberOfPeriods = 1; 
     } 
    }, 200); 
    } 
}

怎麼會這樣做呢？

來源

2014-04-10 corvid

'而（$（ '＃裝載機'）。長度> 0）{'這是爲什麼.... – epascarello

我想象它會進入一個無限循環，但我不確定如何適當地循環x毫秒的時間片。 – corvid

嘗試是這樣的

function showLoader() { 
    var load; 
    load = $('<div id="loader"></div>'); 
    $(document.body).append(load); 
    load.html('Crunching Some Data.'); 
    numberOfPeriods = 1; 

    interval = setInterval(function(){ 
     if(numberOfPeriods < 4) 
     { 
      load.html(load.html() + '.'); 
      numberOfPeriods++; 
     } 
     else 
     { 
      load.html('Crunching Some Data.'); 
      numberOfPeriods = 1; 
     } 
    }, 200); 
} 

function hideLoader(){ 
    clearInterval(interval); 
    $('#loader').remove(); 
}

來源

2014-04-10 20:00:11

不要把setTimeout放在循環中。相反，在setTimeout調用的函數頂部測試「完成」條件（測試#loader的長度）。如果沒有完成，請再次使用setTimeout。如果完成，調用一個可以移動事物的函數。

來源

2014-04-10 19:41:01 user1329482

橢圓字加載屏幕

回答

相關問題