解決 Dojo Layout 在 IE7 初始畫面會跳動的小技巧
是這樣的 , 我最近用 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 所重新排版的頁面就出現了
例如
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <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 卻連白畫面都沒看到就直接顯示排版好的畫面了 , 真的是 ….
Categories: Dojo
有人做出一種頁面一開始會顯示 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 都有