是這樣的 , 我最近用 dojo 來輔助設計版面布局有使用到 dijit.layout 下的很多元件可以做很炫的排版 , 當然使用這些元件的時候 ,瀏覽器會花比較多的時間來處理畫面 在 IE7要開始執行包含有 dijit.layout的網頁時候 , 一開始就會先顯示尚未編排好的版面 , 要等到 dojo 都解析完整個頁面重新排版的時候才會正常 , 因此Client 端會感受到畫面一開始是錯的,然後變正確,另一種說法是 , 畫面在瞬間內會跳 ....
而這些狀況 , FireFox ,Google瀏覽器都不會出現 , 這更讓我應證了 IE7 是個 ... 嘿嘿嘿 ...
好了 , 不管 IE7 效能怎樣 , 龜毛的我總是要求要更完美些 , 於是找一找 Google , 有人做出一種頁面一開始會顯示 progress bar 的動畫 , 然後用 fade in out 的方式再把頁面呈現出來 , 看一看人家實作的方式 , 其實正好解決我的問題 , 其實我的問題很簡單用下面的方式就可以解決畫面跳動的問題了
首先我們要建立一個長寬都是 100% 的絕對定位的 layer , 將這個 layer 設定 index 在很高層以覆蓋所有頁面 , 因此一開始畫面就是空的 , 最後再使用 dojo.addOnLoad 去執行關閉這個 layer, 於是 dojo 所重新排版的頁面就出現了
例如
<style>
#overlay {
background-color: #ffffff;
width: 100%;
height: 100%;
index: 9999999;
position:absolute;
top:0;
left:0;
}
</style>
<script>
function init_layout() {
//設定 <div id="overlay"> 的 style 屬性以關閉這層 layer
dojo.style( dojo.byId("overlay") , "display" , "none" );
}
dojo.addOnLoad(init_layout);
</script>
<body>
<div dojoType .... >
<!-- 這是網頁原始內容 -->
</div>
<div id="overlay"></div> <!-- 這是用來覆蓋原網頁的 layer -->
</body>
其實很簡單吧 ^^ 雖然 IE7 還是要等差不 0.2 秒的白畫面才顯示出全部頁面 , 但至少比畫面跳動好了 , 而 FireFox 2.0 卻連白畫面都沒看到就直接顯示排版好的畫面了 , 真的是 ....
有人做出一種頁面一開始會顯示 progress bar 的動畫 , 然後用 fade in out 的方式再把頁面呈現出來 ,where is this webpage, I want to have a look too.
google 隨便搜的
http://www.seabreezecomputers.com/tips/progress.htm
不過我想應該有很多地方找的到啦 , 自己寫也可以 , 原理不難
最簡單的方式 , 就是弄一個絕對定位 div 在最上層 , 這個 div 內就有 progress 動畫
當 onload 事件觸發後 , 把這個 div fadeout
可能還需要搭配 fade in out 的 script , jquery , dojo 都有