javascript - 加载外部页面时显示图像

Question

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

脚本

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