jquery - jQueryを使用してページローダーを追加する

Question

少し助けが必要です。どこから始めたらいいのかわからない。Webサイトにページローダーを追加する必要があります。最初にフォームを送信し、次にSimpleXMLを使用してexpediaで外部XMLシートを呼び出します...ロードに1分かかるため、このページに画像ローダーを追加します。しかし、どうすればこれを行うことができますか？Googleを調べましたが、役立つ情報が見つかりませんでした。

COMPLETEページがロードされるまでローダーを表示するために必要です。

Answer 1

これには多くの解決策がありますが、簡単な解決策は次のとおりです。

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>

（コードのタイプミスが修正されました）

Answer 2

spin.jshttp: //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();

Answer 3

このローダー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>

それは私のために完全に働いています。