Question

当我点击按钮时，它将导航到另一个页面，在完全加载页面之前我想显示加载的gif图像。（不使用Ajax）

Answer 1

首先在body标签后添加：

<div id="loading">
    <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

然后将div和image的样式类添加到css：

#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}

#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}

最后将此javascript添加到您的页面（最好在页面末尾，然后在关闭body标签之前）：

$(window).load(function() {
    $('#loading').hide();
});

Answer 2

这就是我做的事情

1。）在主体上设置div标签，并为其指定“页面”ID 2.）之后，在“page”div标签旁边放置一个div标签，并为其提供“loading”ID。

<div id="page">
   <body>
        //whatever you page code is
   </body>
</div><div id="loading"></div>

3.）设置CSS。

<style type="text/css">
    #page       {display: block;}

    #loading    {display: none;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 100;
                width: 100vw;
                height: 100vh;
                background-color: rgba(255, 255, 255, 0.5);
                background-image: url('../Images/nameofgifimage.gif');
                background-repeat: no-repeat;
                background-position: center;}
</style>

4.）最后，设置你的JQuery。我正在使用VB.net，所以对于ID，我必须得到ClientID。

<script type='text/javascript' src="../Scripts/jquery-1.4.1.min.js"></script>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../Scripts/jquery.maskedinput.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%= btnSearch.ClientID %>").click(function () {
             $('#loading').show();
             return true;
        });
    });

</script>

如果这对您不起作用，请告诉我，我会尝试找出问题所在。

当我点击jquery / javascript中的按钮时加载图像显示

2 个答案: