在javascript處理卡住時顯示GIF圖像

我正在構建一個應用程序，其中我正在執行一些冗長的（10-15秒）的java腳本執行。我想在這個執行過程中顯示一個gif圖像。我添加了一個gif加載圖像，在開始處理我的javascript之前，我設置了包含gif圖像的div的樣式來顯示：block和javascript處理完成後，我將其設置回顯示：無。我可以看到gif圖像apprearing但它沒有顯示動畫。它卡住了。這個gif是一個加載圖標。在javascript處理卡住時顯示GIF圖像

我的JavaScript函數看起來somethng這樣

function jsFunc(){ 
// set the div containg the image to display:block 
elmDivGif.style.display="block"; 

Here comes my operation which will take 10-15 secons to finish 

// setting the image style to none 
elmDivGif.style.display="none"; 
}

有什麼不對的這種做法。我覺得gif動畫和js都使用相同的線程來運行，並且它一次只能用於一個。

請指教。

來源

2011-07-18 tamojit

你可以發佈GIF動畫？我認爲這個問題與形象有關。您也可以嘗試從http://www.ajaxload.info下載加載程序 – PeeHaa

當JavaScript未運行時，您是否確保動畫.gif有效？ –

JavaScript是單線程的，因此它不能同時顯示動畫和執行昂貴的事情。 – pimvdb

Gif將不會顯示動畫，因爲瀏覽器渲染過程實際上與運行javascript代碼的線程相同。爲了實現您要做的事情，您必須使用Web Workers，但請記住，它尚未被所有瀏覽器支持。

來源

2011-07-18 17:29:11

爲了記錄，MDC提供了這方面可以理解的文章：https：//developer.mozilla.org/en/Using_web_workers。 – pimvdb

如果您想在同一時間運行javascript和動畫gif，則必須在JavaScript代碼中有中斷。這可以通過將其分成多個功能並使用setTimeout以約10毫秒的延遲調用每個功能來實現。

來源

2011-07-18 17:32:37

謝謝Jcubed，我會檢查並回復。 – tamojit

我在使用setTimeout的javascript處理過程中成功顯示了我的gif動畫，並以足夠小的突發進行處理而不會阻塞顯示，它允許其他點擊事件等。您沒有提及您的過程正在這樣做，我假設你至少可以把它的一些分解成亞毫秒級的組。

在setTimeout調用之間，我for循環的10,000次迭代結果是10ms延遲的甜蜜點。作爲用戶體驗的總時間越來越短，因爲他們仍然可以與頁面交互，並且他們更耐心，因爲他們可以觀察動畫，表明工作正在進行。這似乎比「儘可能快」地完成動作的卡住頁面更可取。

setTimeout調用您的項目的迭代次數將取決於每次迭代需要多長時間。試驗無論多少次迭代對您都有好處，並且要記住，如果您嘗試最大化迭代次數，較慢的計算機可能會有不同的體驗。

這裏是僞代碼，使我的應用程序進行交互更順暢：

masterArray = populateMasterArray(); 
processInteractively(0, masterArray, ...); 
function processInteractively(i, masterList, ...) { 
    if (masterList.length > i) { 
     for (var x=0; x < 10000 && masterList.length > (i+x); x++) { 
      var tempI = i + x; 
      //...process this tempI iteration 
     } 
     i += x; // Lastly update i with however many iterations were processed 

     // Wait 10 milliseconds to continue processing; allowing the 
     // browser time to compose itself and display a gif animation 
     setTimeout(function() { 
      processInteractively(i, masterList, ...); 
     }, 10); 
    else { 
     outputResults(...variablesBuiltDuringExecution); 
    } 
}

有一件事我注意到的是，儘管動畫看起來「卡住」，如果你的循環計數器是「過高」，它仍然根據自己的時間線進行動畫製作，並且只要動畫可以恢復，就會跳轉到適當的外觀。因此它可能會在美學上被接受爲在動畫中有一些輕微的（或幾乎不可察覺的）暫停，這可能表明正在完成該工作。

來源

2014-02-24 17:10:00 veeTrain

在javascript處理卡住時顯示GIF圖像

回答

相關問題