在jquery/javascript中单击按钮时加载图像显示_Javascript_Jquery_Html_Image Loading

在jquery/javascript中单击按钮时加载图像显示

javascript jquery html

在jquery/javascript中单击按钮时加载图像显示,javascript,jquery,html,image-loading,Javascript,Jquery,Html,Image Loading,当我单击按钮时，它将导航到另一个页面，在页面完全加载之前，我想显示正在加载的gif图像。（不使用Ajax）首先在body标记之后添加以下内容： <div id="loading"> <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." /> </div> 最后，将此javascript添加到页面中（最好在页面末尾，当然在关闭body标记之前）：这就是我所做的 1.

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

首先在body标记之后添加以下内容：

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

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

这就是我所做的

1.）在正文上设置div标记，并给它一个“page”ID。
2.）之后，在“page”div标记旁边放置一个div标记，并给它一个ID“loading”

<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>


#页面{显示：块；}
#加载{显示：无；
位置：绝对位置；
排名：0；
左：0；
z指数：100；
宽度：100vw；
高度：100vh；
背景色：rgba（255、255、255、0.5）；
背景图像：url（'../Images/nameofgimage.gif'）；
背景重复：无重复；
背景位置：中间；}

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>


$（文档）.ready（函数（）{
$（“#”）单击（函数（）{
$（“#加载”）.show（）；
返回true；
});
});

如果这对您不起作用，请让我知道，我将尝试找出问题所在。

我的回答是否解决了您的问题？

<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>

<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>