加载外部页面时显示图像

Question

使用脚本加载div中的外部页面（外部表示我的网站中的页面）所以使用以下脚本加载页面，因为加载页面需要时间，所以我需要显示图像，直到页面加载

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>

错误是在点击链接

之前显示图像

我想在我点击链接时显示图像，并在页面加载时消失

Answer 1

解释......

CSS 更改为显示：无：

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

}

的Javascript 改变这个：

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

和此：

 $('.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');
    });

Answer 2

你的div总是可见的。您需要更改css以使其默认不可见：

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

}

display: unset只使用标记的默认值，即可见。

您还需要将showLoader功能更改为：

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

Answer 3

此外，在showLoader函数中，将显示值设置为“block”