Jen

JQuery(document).Ready及JQuery(Window).Ready

最近在做一個小官網,有幾個畫面會像下面這個圖(圖一)這樣,

有一個「回最上方」的Div會壓住右邊的Banner

所以逼不得已要寫一段java script來解決這個問題。

2010-09-02_180318
(圖一)

然後我切版的同事,就寫了以下這段程式碼,

$(function() {
    $('#totopbtn').hide();
    var con = $('.article').height();
    var rb = $('.rightbar').height();

    if (con - 142 > rb) {
        $('#totopbtn').show();
    }
});

主要是在document.ready之後,先把「回最上方」的Div給hide()起來,

然後計算左邊本文Div(.article)高度及Banner Div(.rightbar)高度,

如果(.article)高度 大於 (.rightbar)高度 142px,就要把「回最上方」這個Div給秀出來。

在FireFox跑起來的畫面是正常的,「回最上方」按鈕如預期的消失啦!!!!

2010-09-02_182430

 

但網頁開發人員最悲慘的就是你要測試過N個Browser都沒問題,才叫沒Bug,Fuck off!

開了第二個browser - Chrome就出問題啦,happy啊!!

抓出來的高度(height)會有問題,

我先加一個alert()在上面java script第5行的地方,如下。

$(function() {
    $('#totopbtn').hide();
    var con = $('.article').height();
    var rb = $('.rightbar').height();
    alert('此時抓好了height丟到變數裏面去了');
    if (con - 142 > rb) {
        $('#totopbtn').show();
    }
});

注意看一下跑出來的畫面,右邊banner有圖還沒load完,就先抓高度了

所以height會比預期的來得少很多(也就是少了圖的高度),

這也是document.ready的特性,把所有的dom讀完之後,就開始執行
2010-09-02_182113

 

所以在chrome還是不對,一樣壓在上面!!!2010-09-02_182750

我想到window.ready是在所有資源都下載完之後,才會被執行,

但是所有document.ready都要在window.ready前面,當然就要把程式改成…

jQuery(window).load(function() {
    $('#totopbtn').hide();
    var con = $('.article').height();
    var rb = $('.rightbar').height();

    if (con - 142 > rb) {
        $('#totopbtn').show();
    }
});

就是在所有資源下載完之後,才會開始我們想要的判斷,

但但但但!!!!這寫法似乎有點不完美,

假設,我們要下載的圖很大(不過不太可能),

再假設好了,使用者他家的數據機還是那該死的撥接,網路速度比我們用爬的還慢,

上面這段寫法可能會有些不完美,

如果圖要載很久,讀完dom物件到載完圖假設3秒好了,

這3秒使用者就有可能會看到「回最上方」的Div壓在那該死的右邊Banner,

這個就顯得有點…鳥…!?

所以再小改一下順序,

$(function() {

    $('#totopbtn').hide();
});

jQuery(window).load(function() {
   
    var con = $('.article').height();
    var rb = $('.rightbar').height();

    if (con - 142 > rb) {
        $('#totopbtn').show();
    }
});

在dom讀完之後,先把「回最上方」的Div Hide()起來,

然後等網站所有資源都下載完之後,再做「是否該出現按鈕」的判斷,

這樣就完美了!!是不是!
2010-09-02_183858

 

靠,當然你可以直接在「回最上方」那個Div先定義Display:none,就不用寫1~4行。

0 意見: