Running jQuery function after all media is loaded

Question

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.

"Ready" event is shorthand for onReadyStateChange event with status "ready", and will trigger once the document is loaded (which is the html usually), but onload will trigger after everything finished loading. — venimus, Jun 10 '11 at 16:07
Possible duplicate of [Official way to ask jQuery wait for all images to load before executing something](http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin) — Kaspar Lee, Feb 07 '16 at 18:58

score 8 · Accepted Answer · edited Jun 10 '11 at 17:24

8

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

edited Jun 10 '11 at 17:24

wowpatrick

5,082
15
55
86

answered Jun 10 '11 at 16:02

alexl

6,841
3
24
29

score 1 · Answer 2 · edited May 23 '17 at 11:59

1

See this answer: Official way to ask jQuery wait for all images to load before executing something

edited May 23 '17 at 11:59

Community

1
1

answered Jun 10 '11 at 16:06

Chris

7,229
7
41
57

score 1 · Answer 3 · answered Jun 10 '11 at 16:06

1

Although it's fairly easy to do with pure CSS, the following tweak on the last line should help with the initial load:

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

It's also recommended to use the resize event 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:

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

answered Jun 10 '11 at 16:06

Marcel

27,922
9
70
85

What dose the throttler actually do? Could you give a bit more information? Thanks! – wowpatrick Jun 10 '11 at 16:29
@wowpatrick: Ah, right. it reduces how regular an event handler fires. It's most useful with `scroll` and `resize` as these event handlers can fire quite a lot and reduce a page's responsiveness if the JS is heavy. – Marcel Jun 11 '11 at 04:19

score 0 · Answer 4 · answered Jun 10 '11 at 16:01

0

I wonder if using the doms' window.onload might be a better solution. I think that will wait for the media to load.

answered Jun 10 '11 at 16:01

ek_ny

10,153
6
47
60

score -2 · Answer 5 · answered Jun 10 '11 at 16:06

-2

You can execute this in pure CSS using the sticky footer technique.

http://www.cssstickyfooter.com/

answered Jun 10 '11 at 16:06

amustill

5,274
23
15

i used it and if the content is more complex it breaks – venimus Jun 10 '11 at 16:08
You may have an issue elsewhere in your markup or CSS, most likely an uncleared float or your implementation is a little out. How complicated is your layout exactly? – amustill Jun 10 '11 at 16:20
I also used a pure CSS solution, but I find it to complex and just clutters your CSS and it's a pain if you later want to change margins anywhere in the main layout. It's more a personal preference. Doesn't deserve a down vote in my opinion, even though I prefere JS. – wowpatrick Jun 10 '11 at 16:22
Clutters the CSS? It's four lines of code. If your footer height changes then it's two simple edits. Javascript shouldn't be used for this type of layout technique. The fact that the author of this question has already outlined several issues, ie. what happens when external widgets such as Disqus load only echoes the point that there are more disadvantages and upkeep with a Javascript-based method than the CSS one. – amustill Jun 10 '11 at 16:35

Running jQuery function after all media is loaded

5 Answers5