jQuery Action after Page and Assets Load

Usually the $(document).ready(function(){}); is good enough when you need an action after a page has loaded in the browser. However, this approach doesn’t account for images and other assets that may still be loading after code has already completely loaded.

To wait for all assets to complete loading, we will use $(window).on(“load”, function() {});. This will wait until the browser window is actually done loading. This works great for a loading screen.


The Incredible Expanding Empty Space

The Problem

Some pages didn’t have enough content and the footer would start floating up and the site designs didn’t call for a sticky footer.

My Solution


    var header_height = jQuery("header").height();
    var content_height = jQuery(".wrap").height();
    var footer_height = jQuery(".footer-container").height();
    var window_height = jQuery(window).height();
    var all_content_height = header_height + content_height + footer_height;
    var gap;
    if (all_content_height < window_height) {
        gap = window_height - all_content_height;
    } else {
        console.log('no content gap detected');