用jquery添加页面加载器

我需要一点帮助。我不知道从哪里开始。我需要在我的网站上添加一个页面加载器。我首先提交一个表单，然后使用SimpleXML通过expedia调用外部xml表单。加载需要一分钟，所以我想将图像加载器添加到此页面。但我该如何去做这件事？我看过谷歌，找不到任何有用的信息。用jquery添加页面加载器

我需要它来显示加载器，直到COMPLETE页面加载完毕。

来源

2012-04-28 liveandream

这有许多解决方案，但一个简单的一种是：

1-创建您的装载机的东西，并在前面加上身体覆盖DIV;
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>

（代码错别字固定）

来源

2012-04-28 17:24:53 rcdmk

注意：在内容加载完成后，'window.load'首先触发，然后触发'document.ready'。 – rcdmk 2012-04-28 17:27:51

+1您也可以直接将'preloader' div作为HTML。 – Shomz 2012-04-28 17:34:43

是的，由您的服务器代码或手工呈现。 – rcdmk 2012-04-28 17:38:41

退房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();

来源

2012-04-28 20:04:45 Connor

HTML

在开始标记后添加以下HTML。该加载器div将在加载页面时显示加载图像。

<div class="pageloader"></div>

CSS

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

}

的JavaScript

起初包括jQuery库。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

现在添加以下代码行完全隐藏在网页加载时加载图像。

<script type="text/javascript"> 
$(window).load(function() { 
    $(".pageloader").fadeOut("slow"); 
}); 
</script>

这是完全为我工作。

来源

2017-10-11 10:46:37

用jquery添加页面加载器

回答

相关问题