我需要一点帮助。我不知道从哪里开始。我需要在我的网站上添加一个页面加载器。我首先提交了一个表单,然后它使用 SimpleXML 调用带有 expedia 的外部 XML 表...加载需要一分钟,所以我想将图像加载器添加到此页面。但是我该怎么做呢?我在谷歌上看过,找不到任何有用的信息。
我需要它来显示加载器,直到加载完成页面。
我需要一点帮助。我不知道从哪里开始。我需要在我的网站上添加一个页面加载器。我首先提交了一个表单,然后它使用 SimpleXML 调用带有 expedia 的外部 XML 表...加载需要一分钟,所以我想将图像加载器添加到此页面。但是我该怎么做呢?我在谷歌上看过,找不到任何有用的信息。
我需要它来显示加载器,直到加载完成页面。
这有很多解决方案,但一个简单的解决方案是:
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>
(代码错别字已修复)
查看 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);
一旦你的表格完成:
$("#loading").data('spinner').stop();
此加载器 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>
它完全适合我。