Question

我有一个简单的jQuery脚本，即使内容不够长，也会将页脚推到页面底部：

$(document).ready(function(){
    positionFooter();
    function positionFooter(){
        //get the div's padding
        var padding_top = $("#footer").css("padding-top").replace("px", "");
        //get the current page height - the padding of the footer
        var page_height = $(document.body).height() - padding_top;
        var window_height = $(window).height();
        //calculate the difference between page and window height
        var difference = window_height - page_height;
        if (difference < 0) 
            difference = 0;
        //write the changes to the div
        $("#footer").css({
            padding: difference + "px 0 0 0"
        })
    }
    //re-run the function if browser window is resized
    $(window).resize(positionFooter)
});

不幸的是，（文件）.ready触发器是早期的，并且不考虑图像＆amp;字体加载，因此计算的值不正确。是否有适合此类任务的触发器？

此外我正在构建的网站正在使用Disqus fot评论，这也会再次改变页面长度，但我认为我需要从Disqus脚本中回拨来考虑这一变化。

Answer 1

尝试$(window).load()

您可能还想检查有关不同文档加载事件的jQuery文档：http://api.jquery.com/category/events/document-loading/

希望有所帮助

Answer 2

请参阅此答案：Official way to ask jQuery wait for all images to load before executing something

Answer 3

虽然使用纯CSS很容易，但最后一行的以下调整应该有助于初始加载：

    $(window).resize(positionFooter).resize();
});

还建议将resize事件处理程序与throttler一起使用，这很容易实现。包括extra bit of JS并将相同的代码块更改为：

    $(window).resize($.throttle(250, positionFooter)).resize();
});

Answer 4

我想知道是否使用doms的window.onload可能是更好的解决方案。我认为这将等待媒体加载。

Answer 5

您可以使用粘性页脚技术在纯CSS中执行此操作。

http://www.cssstickyfooter.com/

加载所有媒体后运行jQuery函数

5 个答案: