Display Image While Loading External Page

Am using script to load external page(external means page in my website) inside div so am using following script to load page since loading page take time so i need to display imag

Solution 1:

To explain...

CSS change to display:none:

#loader {
  display: none;
  width: 100px;
  height: 100px;
  margin: 100px;

}

Javascript Change this:

function ShowLoader() {
    $('#loader').css('display', 'block');
}

and this:

 $('.reveal').on('click', function(e) {
        var $that = $(this);

        e.preventDefault();
        ShowLoader();
        var link = $(this).attr('href');
        $('.page').load(link, function(){
             HideLoader(); // this puts it in the load callback, so that this stuff
             $that.show(); // happens when the load is complete
        });
        $('#leftmenu').css('width', '70px');
        $("#leftmenu b,li ul").hide();
        $('li').unbind('click');
    });

Solution 2:

Your div is always visible. You need to change your css to have it not visible by default:

#loader {
  display: none;
  width: 100px;
  height: 100px;
  margin: 100px;

}

display: unset simply uses the default value for the tag, which is visible.

You will also need to change your showLoader function to:

function ShowLoader() {
    $('#loader').css('display', 'block');
}

Solution 3:

Also, in your showLoader function, set the display value to 'block'