顯示加載圖像並隱藏它

Question

在我的應用程序中，當用戶在一個自定義元素（navigator-element）中單擊項目名稱時，該項目將作爲另一個自定義元素（主要元素）加載。由於其中可能存在許多嵌套項目，因此此加載可能需要一些時間，具體取決於項目的大小。爲了讓用戶知道加載正在進行中，我想顯示一個微調。

這裏是我當前如何試圖做到這一點：

在主元素，我有一個DIV包含微調圖像，並具有hidden?="{{!loading}}"屬性。

當用戶在導航器元素中單擊某個項目的名稱時，變量bool loading將變爲true，並且在加載完成並且所有嵌套的自定義元素都已連接時，應用程序會將loading設置爲false。

但是，spinner div永遠不會顯示，即使loading確實更改爲true，然後更改爲false。似乎Polymer正在抑制中間UI更改，直到所有完成爲止

如果我包含一個按鈕，單擊其中的值切換loading的值，更改將正確顯示。

我還從我的應用程序中的所有地方刪除了所有unresolved屬性以查看它是否重要，但它沒有區別。

當長時間過程正在進行時，我必須做什麼才能顯示微調div？

Answer 1

最有可能的是，您只需在設置loading = true之間等待一個動畫幀並執行更昂貴的操作即可解決此問題。如果您一次完成所有工作，瀏覽器將不會呈現任何新內容，因爲您阻止了ui線程。