当我单击 jquery/javascript 中的按钮时加载图像显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20651373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading image show when i click a button in jquery/javascript
提问by user1225946
When i click the button, it will be navigate to another page, before the page loading completely i want to show the loading gif image.(without using Ajax)
当我单击按钮时，它将导航到另一个页面，在页面完全加载之前，我想显示正在加载的 gif 图像。（不使用 Ajax）
回答by Ravimallya
First right after the body tag add this:
首先在 body 标签之后添加：
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your css:
然后将 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;
}
And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):
最后将此 javascript 添加到您的页面（最好在页面末尾，当然在关闭 body 标记之前）：
$(window).load(function() {
$('#loading').hide();
});
回答by BMantle
This is what I did
这就是我所做的
1.) Set div tag over body and give it an ID of 'page'.
2.) After that, place a div tag next to the 'page' div tag and give it an ID of 'loading'.
1.) 在 body 上设置 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.) Setup CSS.
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.) Finally, setup your JQuery. I am using VB.net so for the ID, I had to get the ClientID.
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>
If this does not work for you, let me know and I will try to figure out what is wrong.
如果这对您不起作用，请告诉我，我会尽力找出问题所在。
