Utilizing a script to load an external page (external meaning a page within my website) inside a div. Loading the page takes time, so I want to display an image until the page is fully loaded.
JAVASCRIPT
function HideLoader() {
$('#loader').css('display', 'none');
}
function ShowLoader() {
$('#loader').css('display', '');
}
$(document).ready(function() {
$('.reveal').on('click', function(e) {
e.preventDefault();
ShowLoader();
var link = $(this).attr('href');
$('.page').load(link);
$('#leftmenu').css('width', '70px');
$("#leftmenu b,li ul").hide();
$('li').unbind('click');
$(this).show();
HideLoader();
});
});
CSS
#loader {
display: unset;
width: 100px;
height: 100px;
margin: 100px;
}
HTML
<div id="loader"> <img src="ajax-loader.gif" alt="loading" /> </div>ISSUE: Currently displaying the image before clicking the link.
I would like the image to appear only when I click on the link and disappear once the page is fully loaded.