使用 jquery 添加页面加载器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10365523/
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
Adding a page loader with jquery
提问by luv2code
I need a little help. I do not know where to start. I need to add a page loader to my website. I first submit a form it then uses SimpleXML to call an exterior xml sheet with expedia.. It takes a minute to load, so I would like to add the image loader to this page. But how do I go about doing this? I have looked on google and could not find any useful info.
我需要一点帮助。我不知道从哪里开始。我需要向我的网站添加一个页面加载器。我首先提交一个表单，然后它使用 SimpleXML 调用带有 expedia 的外部 xml 表。加载需要一分钟，所以我想将图像加载器添加到此页面。但是我该怎么做呢？我在谷歌上看过，找不到任何有用的信息。
I need it to show the loader until the COMPLETE page has loaded.
我需要它来显示加载器，直到完成页面加载。
回答by Ricardo Souza
This has many solutions, but a simple one is to:
这有很多解决方案，但一个简单的方法是：
1- Create an overlay DIV with your loader stuff and prepend to BODY;
2- Add an event listener for window.loador document.readyevent that hides this DIV.
1- 用你的加载器内容创建一个覆盖 DIV 并添加到 BODY；
2- 为隐藏此 DIV 的window.load或document.ready事件添加事件侦听器。
// On the first line inside BODY tag
<script type="text/javascript">
jQuery("body").prepend('<div id="preloader">Loading...</div>');
jQuery(document).ready(function() {
jQuery("#preloader").remove();
});
</script>
(code typos fixed)
（代码错别字已修复）
回答by Connor
Check out spin.js http://fgnass.github.com/spin.js/
查看 spin.js http://fgnass.github.com/spin.js/
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
// Even more options available....
};
var target = document.getElementById('loading');
var spinner = new Spinner(opts).spin(target);
And once your form is done:
一旦你的表格完成：
$("#loading").data('spinner').stop();
回答by Nirendra Singh Panwar
This loader div will show a loading image on page load.
此加载器 div 将在页面加载时显示加载图像。
$(window).load(function() {
$(".pageloader").fadeOut("slow");
});body {
background: black;/* for this demo */
}
.pageloader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/yourLoaderImage.gif') 50% 50% no-repeat rgb(249, 249, 249);
opacity: .8;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="pageloader"></div>It's Completely working for me.
它完全适合我。
