加载所有媒体后运行 jQuery 函数
我有一个简单的 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)
});
不幸的是 (document).ready 触发器太早，并且不考虑图像和图像。字体加载，因此计算出的值不正确。是否有适合此类任务的触发器？
另外，我正在构建的网站正在使用 Disqus fot comments，这也会再次更改页面长度，尽管我认为我需要从 Disqus 脚本进行回调才能考虑到该更改。
I have a simple jQuery script which pushes the footer to the bottom of the page, even if the content is not long enough:
$(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)
});
Unfortunately the (document).ready trigger is to early and dose not consider image & font loading, so the value that is calculated is incorrect. Is there a trigger that is suited for this kind of tasks?
Also the site I'm building is using Disqus fot comments, which also changes the page length again, though I think I need a call-back from the Disqus script to take that change into consideration.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
尝试
$(window).load()您可能还想查看有关不同文档加载事件的 jQuery 文档：http://api.jquery.com/category/events/document-loading/
希望有帮助
try
$(window).load()You may also want to check the jQuery documentation on the different document loading events: http://api.jquery.com/category/events/document-loading/
Hope it helps
请参阅此答案：要求 jQuery 在执行某些操作之前等待所有图像加载的官方方法
See this answer: Official way to ask jQuery wait for all images to load before executing something
虽然使用纯 CSS 相当容易做到，但最后一行的以下调整应该有助于初始加载：
还建议将
resize事件处理程序与节流器一起使用，这很容易实现。包括 额外的一点JS 并将相同的代码块更改为：Although it's fairly easy to do with pure CSS, the following tweak on the last line should help with the initial load:
It's also recommended to use the
resizeevent handler with a throttler which is pretty easy to implement. Include the extra bit of JS and change that same chunk of code to this:我想知道使用 doms 的 window.onload 是否是更好的解决方案。我认为这将等待媒体加载。
I wonder if using the doms' window.onload might be a better solution. I think that will wait for the media to load.
您可以使用粘页脚技术在纯 CSS 中执行此操作。
http://www.cssstickyfooter.com/
You can execute this in pure CSS using the sticky footer technique.
http://www.cssstickyfooter.com/