各位好
在使用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>
已邀請的邦友 {{ invite_list.length }}/5
有一點你得要先了解，無論js放在哪裏。
一定都是先載入完頁面後才會開始跑js程式的。
也就是說，一但你的頁面載入顯示有達到0.5以上的顯示時間。就有機會看到原始的頁面內容。
畢竟js還沒開始跑。且也無任何方式能在頁面未載入完成前跑js。這是不可能辦到的事。
所以一般解決的方式，有如下方法
1.從預設頁面內容下手。如事先放個「讀取中」的字串，或是給他為空。
2.要不然就是先hide起來。在js後再下達show。因為js處理完後再show也是一種方法。
3.最後就是頁面載入中的做法。這招跟第二招差不多。只是對象是body容器。
可以用ng-cloak
用法解釋你可以看這裡https://www.w3schools.com/angular/ng_ng-cloak.asp
或是google 一下
iThome鐵人賽
看影片追技術