Angularjs載入延遲?

angularjs javascript

阿薩姆 2019-10-01 09:50:20 ‧ 1583 瀏覽

各位好
在使用Angularjs時有點小問題, 以下是部分程式碼
在head引用:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

在body使用:

<h5 ng-class="{true: 'green', false: 'red'}[UM_MsgSearch_Color]" style="display:inline;">{{TestString}}</h5>

在使用上沒問題, 但隨著body內容越來越多, 發現網頁一開始載入的瞬間會看到"{{TestString}}"這個字串閃現, 請問該如何避免這問題呢?

有試著直接把angularjs下載引用, 但還是一樣

<script src="../util/angular.min.js"></script>

dragonH iT邦超人 5 級 ‧ 2019-10-01 10:15:13 檢舉

你的 body 內容是透過 api 拿回來的嗎

阿薩姆 iT邦新手 4 級 ‧ 2019-10-01 10:19:45 檢舉

什麼意思? 我是直接寫在body裡

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2019-10-01 14:03:52

最佳解答

有一點你得要先了解，無論js放在哪裏。
一定都是先載入完頁面後才會開始跑js程式的。

也就是說，一但你的頁面載入顯示有達到0.5以上的顯示時間。就有機會看到原始的頁面內容。
畢竟js還沒開始跑。且也無任何方式能在頁面未載入完成前跑js。這是不可能辦到的事。

所以一般解決的方式，有如下方法
1.從預設頁面內容下手。如事先放個「讀取中」的字串，或是給他為空。
2.要不然就是先hide起來。在js後再下達show。因為js處理完後再show也是一種方法。
3.最後就是頁面載入中的做法。這招跟第二招差不多。只是對象是body容器。

阿薩姆 iT邦新手 4 級 ‧ 2019-10-01 15:16:28 檢舉

原來是這樣! 謝謝了!

阿薩姆 iT邦新手 4 級 ‧ 2019-10-01 15:17:31 檢舉

我另外還有一個問題, 不曉得能不能幫忙看看
https://ithelp.ithome.com.tw/questions/10195511

sonia

iT邦新手 2 級 ‧ 2019-10-02 09:43:38

可以用ng-cloak
用法解釋你可以看這裡https://www.w3schools.com/angular/ng_ng-cloak.asp
或是google 一下

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

IT邦幫忙