如何加快我的jQuery粘頁腳的加載時間？

所以我一直在尋找一個堅實的解決方案，用於一段時間的粘腳。我發現在每個頁面和每個瀏覽器上都能很好地工作。然而，加載並生效需要一些時間。有什麼方法可以加快速度？也許在頁面加載之前加載它？有人提到它可以設置爲「onDOMready」而不是onLoad？那有意義嗎？如何加快我的jQuery粘頁腳的加載時間？

總之，這裏是我的代碼：

<script> 
function positionFooter() { 
    var mFoo = $("#myfooter"); 
    if ((($(document.body).height() + 
      mFoo.height()) < $(window).height() && 
      mFoo.css("position") == "fixed") || 
      ($(document.body).height() < $(window).height() && 
      mFoo.css("position") != "fixed")) 
    { 
      mFoo.css({ position: "fixed", bottom: "0px" }); 
    } 
    else 
    { 
      mFoo.css({ position: "static" }); 
    } 
} 

    $(document).ready(function() { 
      positionFooter(); 
      $(window).scroll(positionFooter); 
      $(window).resize(positionFooter); 
      $(window).load(positionFooter); 
    }); 
</script> 

<!--content ---> 

<div id="myfooter" style="width:100%;"><!--footer content--></div>

我如何加載速度？

來源

2013-02-01 boy

你不需要'$（窗口）.load（positionFooter）; ' – Morpheus

如果您確實希望頁腳依賴於文檔高度（您的代碼所做的），那麼您必須等待文檔加載才能知道它有多高。 – jfriend00

@基督我已經更新了我的答案。它有一個錯誤。 – Fresheyeball

沒有JavaScript需要（雖然它是有幫助的）。這裏要做的最好的事情就是利用奇妙的最小高度屬性，而不是從文檔總高度計算。

HTML

<div id="wrap"> 
     <div id="content"> 
     <footer></footer> 
    </div>

CSS

html,body{ 
     height:100%; 
    } 
    #wrap{ 
     min-height:100%; 
     position:relative;  
    } 

    #content{ 
     padding-bottom:20px; // allow room for footer 
    } 
    footer{ 
     position:absolute; 
     width:100%; 
     bottom:0; 
     left:0; 
     height:20px; 
    }

當你的頁面可能比這個更復雜，如果你發現，min-height:100%在CSS不能單獨產生期望的結果，您可能希望用javascript設置。

$(document).ready(function(){ 
     var $window = $(window), 
      $wrap = $('#wrap'), 
      setMinHeight = function(){ 
       $wrap.css('min-height',$window.height()); 
      }; 
      setMinHeight(); 
      $window.resize(setMinHeight); 
    });

DEMO人拉@Nick

DEMO with more content

來源

2013-02-01 16:37:37 Fresheyeball

這是最好的解決方案，因爲它不依賴於JavaScript。 –

實際上，你必須給''wrap'提供'margin-top：-20px;''。看看這[jsfiddle]（http://jsfiddle.net/qs9vM/），這裏是你的例子[jsfiddle]（http://jsfiddle.net/qs9vM/1/） – Morpheus

@Morpheus你幾乎已經知道了但是你的頁腳在底部有間距。看看這個http://jsfiddle.net/A6fXe/1/ –

如何加快我的jQuery粘頁腳的加載時間？

回答

相關問題