问题描述:

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 image until page is loaded

SCRIPT

 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>

ERROR is it display image before clicking link

i want the image to display when i click link and disappear when page is loaded

网友答案:

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');
    });
网友答案:

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');
}
网友答案:

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

相关阅读:
Top