Struggling to add a preloader on my website. I came across the following code that appears to be functioning (I can see the CSS animation before the images load - check out this JSFiddle). However, I'm unsure about how the JS code actually operates...
Which section of the code indicates when all the images have loaded and it's safe to stop the pre-loader animation? Can this method be trusted?
Thank you in advance!
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: