加载外部页面时显示图像

display image while loading external page

本文关键字：显示 显示图 图像 外部 加载      更新时间：2023-09-26

我使用脚本在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>

错误是点击链接前显示图像

我希望图像在单击链接时显示，并在加载页面时消失

解释一下...

CSS 更改为显示：无：

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

爪哇语更改此设置：

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

您的div 始终可见。您需要更改 css 以使其默认不可见：

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

display: unset仅使用标记的默认值，该值可见。

您还需要将showLoader函数更改为：

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

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

相关文章：