ページの読み込み中にgifをロードする

重複しているかもしれませんが、正しい答えを見つけることができないようです。私が達成しようとしていたのは、load moreを押すとロード中のgifを表示することでした。ページの読み込み中にgifをロードする

これは私が何とかならば、人のクリックがよりロードするとき、私はロードGIFを表示することができ、その後、アイテムがロードされる間、そのGIF画像を非表示にすることを考えていた私のwebsite.Whatの構造です。

これはページの基本的なコード構造です。

何私が試した：

<script> 
$('#loadmore').on('click',function(){ 
//add loader class to limitpage 

// when ajax completes 

//remove loader class from limitpage 
}) 
</script>

はCSS：私はこれを行う場合

.loader { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249); 
}

しかし、私は望ましい結果が表示されません。

私はこれに向かってどのようなアプローチをしていますか？解決策は何ですか？

出典

2016-11-24 BOTJr.

どこAJAX呼び出しは、結果を取得するのですか？ –

はそれほど明白ではありませんが、loadmoreイベントハンドラ内にありますか？ –

は '$（"。loader "）。show（）'を呼び出す前にローダーを表示し、応答が受信された後にローダーを非表示にします。 '$（"。loader "）。hide（）' –

ajaxのロードが完了した後にローダーを非表示にする方法の例を次に示します。

以下のコードでは「読み込み完了」となっていますが、解析された応答データと置き換えて「表示アイテム」のコンテンツに追加します。

$('#loadmore').on('click',function(){ 
 
    $(".loader").show(); 
 
    $.get("https://upload.wikimedia.org/wikipedia/commons/9/92/Big_Sur_Coast_California.JPG", function(){ 
 
     $(".loader").hide(); 
 
     console.log("finished loading. Append data to content here"); 
 
    }); 
 

 
})

.loader { 
 
    position: fixed; 
 
    left: 200px; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 9999; 
 
    background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249); 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<navbar> 
 
</navbar> 
 
<div id="filter"> 
 

 
</div> 
 
<div class="loader"> 
 
    <img src="https://d13yacurqjgara.cloudfront.net/users/140957/screenshots/2533654/loading-animation.gif" height="150"> 
 
</div> 
 
<div id="limitpage"> 
 

 
</div> 
 
<button id="loadmore">load more</button> 
 
<footer> 
 
</footer> 
 
</body>

出典

2016-11-24 12:56:37 Dave

私は以前にそれをやった方法は、ループローダーGIFとDIVを作成し、display:hiddenにDIVを設定し、あなたのAJAXのロード中にバックdisplay: block（または任意のタイプのあなたが欲しい）にDIVを変更しました。完全/成功/エラー/それ以外のものを再表示してください。

出典

2016-11-24 12:42:12

いくつかのバイブルや何かをバックアップしてください、私はそれを感謝します。 –

ページの読み込み中にgifをロードする

答えて

関連する問題