解決 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 所重新排版的頁面就出現了

例如

<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 卻連白畫面都沒看到就直接顯示排版好的畫面了 , 真的是 ….

2 則評論在 解決 Dojo Layout 在 IE7 初始畫面會跳動的小技巧.

發佈留言