Preloader - Does this code preload anything?

Question

Trying to implement a preloader on my website. I've found the code below which seems to be working (at least I see the little CSS animation before the images appear - see this JSFiddle ).

However, looking at the JS code I'm really not sure how that works...

Which part of the code identifies that all the pictures, etc. have been loaded and that the pre-loader animation can stop? Is this a reliable solution?

Many thanks

JS:

var show_loader = function(){};
var hide_loader = function(){};
jQuery(document).ready(function($){

    /*Make Loader Height Same as Window*/
    $(".loader_cont").css("height",$(window).height());
    /*Make Loader Height Same as Window*/



    /*
    *
    *Window Resize
    *
    */
    $(window).resize(function(){
        move_bottom_border();
        fit_menu();
        $(".loader_cont").css("height",$(window).height());
    });
    /*
     *
     *Window Load
     *
     */
    $(window).load(function(){
        hide_loader();

    });
    /*Hide And Show Loader*/
    hide_loader = function(){
        $(".loader_cont").hide();
    }
    show_loader = function(){
        $(".loader_cont").css("height",$(window).height());
        $(".loader_cont").show();
    }
    /*Hide And Show Loader*/
});

HTML

<div class="loader_cont">
    <div class="bubblingG">
        <span id="bubblingG_1">
        </span>
        <span id="bubblingG_2">
        </span>
        <span id="bubblingG_3">
        </span>
    </div>
</div>
Then link to images...

CSS:

Answer 1

The jQuery .load() function is triggered when the element it is called on and all of its children elements are completely loaded. Here, it is called on $(window), meaning it will wait untill every element of the current page has been loaded to trigger the handler, which here hides the animation.

In short, this code waits for the whole window to be fully loaded then hides the animation.