iT邦幫忙

0

Angularjs載入延遲?

  • 分享至 

  • xImage

各位好
在使用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 }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
㊣浩瀚星空㊣
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

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

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

我要發表回答

立即登入回答