Javascript 如何加快jQuery粘性页脚的加载时间？

因此，我一直在寻找一个坚实的解决方案，为粘脚相当一段时间。我发现它在每个页面和每个浏览器上都能很好地工作；但是，加载并生效需要一些时间。有什么办法可以加快速度吗？也许在页面加载之前加载它？有人提到它可以设置为“onDOMready”而不是onLoad？这有意义吗

无论如何，这是我的代码：

<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>

函数positionFooter（）{
var mFoo=$（“#我的页脚”）；
如果（（$（document.body）.height（）+
mFoo.height（））<$（window.height（）&&
mFoo.css（“位置”）=“固定”）||
（$（document.body）.height（）<$（window.height（）&&
css（“位置”）！=“固定”））
{ 
css（{位置：“固定”，底部：“0px”}）；
} 
其他的
{ 
css（{position:“static”}）；
} 
} 
$（文档）.ready（函数（）{
positionFooter（）；
$（窗口）。滚动（位置页脚）；
$（窗口）。调整大小（位置页脚）；
$（窗口）.load（位置页脚）；
});

如何加快加载速度？

不需要javascript（尽管它很有用）。这里要做的最好的事情是利用奇妙的min height属性，而不是从总文档高度计算

html

由于您的页面可能比这更复杂，如果您发现仅css中的

minheight:100%

无法产生所需的结果，您可能需要使用javascript

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

al-la@Nick

不需要javascript（尽管它很有用）。这里要做的最好的事情是利用奇妙的min height属性，而不是从总文档高度计算

html

由于您的页面可能比这更复杂，如果您发现仅css中的

minheight:100%

无法产生所需的结果，您可能需要使用javascript

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

al-la@Nick

---

您不需要

$（窗口）如果您确实希望页脚取决于文档高度（您的代码就是这样做的），那么您必须等待文档加载才能知道它有多高。@Christo我已经更新了答案。其中有一个bug。您不需要
$（window.load（positionFooter）如果您确实希望页脚取决于文档高度（您的代码就是这样做的），那么您必须等待文档加载才能知道它有多高。@Christo我已经更新了答案。它有一个bug。这是最好的解决方案，因为它不依赖JavaScript。实际上，你必须给
页边顶部：-20px到
#包装
。看看这个，这是你的例子@Morpheus，你差不多知道了，但是你的页脚底部有空格。看看这个，想想我在编辑这个时分心了，没有完成我的答案。@Freshyeball你的演示仍然一团糟<代码>#换行
需要顶部或底部负边距与页脚高度相同。你需要去掉padding属性。这是最好的解决方案，因为它不依赖JavaScript。实际上，你必须给出
margintop:-20px到
#包装
。看看这个，这是你的例子@Morpheus，你差不多知道了，但是你的页脚底部有空格。看看这个，想想我在编辑这个时分心了，没有完成我的答案。@Freshyeball你的演示仍然一团糟<代码>#换行
需要顶部或底部负边距与页脚高度相同。您需要去掉padding属性。
  $(document).ready(function(){
       var $window = $(window),
           $wrap = $('#wrap'),
           setMinHeight = function(){
                $wrap.css('min-height',$window.height());
           };
           setMinHeight();
           $window.resize(setMinHeight);
  });