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

Loading image show when i click a button in jquery/javascript

本文关键字：按钮 加载 图像 显示 单击 jquery javascript      更新时间：2023-09-26

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

在正文标签之后的第一个添加以下内容：

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

然后将div 和图像的样式类添加到您的 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();
});
这就是

我所做的

1.） 在正文上设置div 标签，并为其指定一个 ID "页面"。
2.） 之后，在"页面"div 标签旁边放置一个div 标签，并为其提供"加载"的 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，我必须获取客户端 ID。

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

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

相关文章：