在頁面加載更多項目時加載gif

這可能是一個重複，但我似乎無法找到正確的答案。我試圖實現的是顯示加載gif，當我按下加載更多。在頁面加載更多項目時加載gif

這是我website.What的我想的結構，如果不知何故，我可以顯示加載GIF，當人點擊加載更多然後隱藏GIF雖然項目被加載。

<body> 
<navbar> 
</navbar> 
<div id="filter"> 

</div> 
<div id="limitpage"> 

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

這將是頁面的基本代碼結構。

我的嘗試：

<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事件處理程序內？ –

在ajax調用'$（「。loader」）。show（）'之前顯示加載器並在收到響應後隱藏加載器。 '$（「。loader」）。hide（）' –

下面是如何在ajax完成加載後隱藏加載器的示例。

以下代碼中的「已完成加載」在哪裏，請將其替換爲已解析的響應數據並將其附加到「DISPLAY ITEMS」內容中。

$('#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，並將DIV設置爲display:hidden，然後在AJAX加載期間將DIV更改回display: block（或任何您想要的類型）。在完成/成功/錯誤/其他任何情況下重新進行查看。

來源

2016-11-24 12:42:12

請備份一些小提琴或其他東西，我會很感激。 –

在頁面加載更多項目時加載gif

回答

相關問題