jQuery 在 javascript 中实现加载旋转轮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19315149/
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
Implementing a loading spinning wheel in javascript
提问by Rose18
In my web site I need to pop up a dummy 'loading' spinning wheel when click a button and vanish after some time. It's just a dummy page. I would be much obliged if anyone can explain how to do such a thing. Can I do this with javascript or jQuery?
在我的网站中，我需要在单击按钮时弹出一个虚拟的“加载”纺车，并在一段时间后消失。这只是一个虚拟页面。如果有人能解释如何做这样的事情，我将不胜感激。我可以用 javascript 或 jQuery 做到这一点吗？
Thanx in advance
提前谢谢
回答by Ayyappan Sekar
Have a div/image in the right place you need, hide it first time the page loaded. like
在您需要的正确位置放置一个 div/图像，第一次加载页面时将其隐藏。喜欢
<input type="button" id="button"/>
<div id="load"><img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif"/>
</div>
and in your jquery, set a handler for the click event of button to show or hide the div
并在您的 jquery 中，为按钮的单击事件设置一个处理程序以显示或隐藏 div
$(document).ready(function(){
$('#button').click(function(){
$('#load').show();
setTimeout(function() {$('#load').hide()}, 2000);
});
});
setTimout can be used to hide the div after some time. check the workign example here
setTimout 可用于在一段时间后隐藏 div。在此处查看工作示例
回答by Well Wisher
you can do it by ajax or simply jquery.
您可以通过 ajax 或简单的 jquery 来完成。
here is the ajax way
这是ajax方式
$.ajax({
type: "POST",
data: serializedDataofthisform,
dataType: "html", /* or json */
url: "your url",
/* ajax magic here */
beforeSend: function() {
$('#loaderImg').show(); /*showing a div with spinning image */
},
/* after success */
success: function(response) {
/* simply hide the image */
$('#loaderImg').hide();
/* your code here */
}
});
html
html
<div id="loaderImg"><img src="path" alt=""/></div>
Javascriptby time out function :- setTimeout()
超时功能的Javascript:- setTimeout()
回答by Jared
Here's another example that doesn't use an image.
这是另一个不使用图像的示例。
// Author: Jared Goodwin
// showLoading() - Display loading wheel.
// removeLoading() - Remove loading wheel.
// Requires ECMAScript 6 (any modern browser).
function showLoading() {
if (document.getElementById("divLoadingFrame") != null) {
return;
}
var style = document.createElement("style");
style.id = "styleLoadingWindow";
style.innerHTML = `
.loading-frame {
position: fixed;
background-color: rgba(0, 0, 0, 0.8);
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 4;
}
.loading-track {
height: 50px;
display: inline-block;
position: absolute;
top: calc(50% - 50px);
left: 50%;
}
.loading-dot {
height: 5px;
width: 5px;
background-color: white;
border-radius: 100%;
opacity: 0;
}
.loading-dot-animated {
animation-name: loading-dot-animated;
animation-direction: alternate;
animation-duration: .75s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes loading-dot-animated {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
`
document.body.appendChild(style);
var frame = document.createElement("div");
frame.id = "divLoadingFrame";
frame.classList.add("loading-frame");
for (var i = 0; i < 10; i++) {
var track = document.createElement("div");
track.classList.add("loading-track");
var dot = document.createElement("div");
dot.classList.add("loading-dot");
track.style.transform = "rotate(" + String(i * 36) + "deg)";
track.appendChild(dot);
frame.appendChild(track);
}
document.body.appendChild(frame);
var wait = 0;
var dots = document.getElementsByClassName("loading-dot");
for (var i = 0; i < dots.length; i++){
window.setTimeout(function (dot) {
dot.classList.add("loading-dot-animated");
}, wait, dots[i]);
wait += 150;
}
};
function removeLoading() {
document.body.removeChild(document.getElementById("divLoadingFrame"));
document.body.removeChild(document.getElementById("styleLoadingWindow"));
};
