我需要一點幫助。我不知道從哪裏開始。我需要在我的網站上添加一個頁面加載器。我首先提交一個表單,然後使用SimpleXML通過expedia調用外部xml表單。加載需要一分鐘,所以我想將圖像加載器添加到此頁面。但我該如何去做這件事?我看過谷歌,找不到任何有用的信息。用jquery添加頁面加載器
我需要它來顯示加載器,直到COMPLETE頁面加載完畢。
我需要一點幫助。我不知道從哪裏開始。我需要在我的網站上添加一個頁面加載器。我首先提交一個表單,然後使用SimpleXML通過expedia調用外部xml表單。加載需要一分鐘,所以我想將圖像加載器添加到此頁面。但我該如何去做這件事?我看過谷歌,找不到任何有用的信息。用jquery添加頁面加載器
我需要它來顯示加載器,直到COMPLETE頁面加載完畢。
這有許多解決方案,但一個簡單的一種是:
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>
(代碼錯別字固定)
退房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();
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>
這是完全爲我工作。
注意:在內容加載完成後,'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