僅當未加載初始數據時才顯示加載gif頁

我想僅在頁面上未加載初始記錄時顯示加載GIF（例如每頁10個記錄）。我想要在頁面上加載最初的10條記錄時加載GIF消失。我已經嘗試了下面的一段代碼，但它部分工作。當頁面上沒有加載初始記錄時，它會顯示加載GIF，但當頁面上加載/顯示10個初始記錄時，它不會自動消失。一旦加載更多按鈕來加載更多的記錄，加載GIF自動消失，使部分工作正常。僅當未加載初始數據時才顯示加載gif頁

如果我沒有正確解釋，請讓我知道。

if(track_click == 0) 
{ $('.animation_image').show(); }

以下是整個代碼。

<script type="text/javascript"> 
$(document).ready(function() { 
var track_click = 0; 
var total_pages = <?php echo $total_review_pages; ?>; 
var statepkid = <?php echo $int_statepkid; ?>; 
var regionpkid = <?php echo $int_regionpkid; ?>; 
$('#results').load("fetch_page.php", {'page':track_click, 'state':statepkid, 'region':regionpkid}, function() {track_click++;}); 

if(track_click == 0) 
{ $('.animation_image').show(); } 

$(".load_more").click(function (e) { 
    $(this).hide(); 
    $('.animation_image').show(); 
    if(track_click <= total_pages) 
    { 
     $.post('fetch_pages.php',{'page': track_click, 'state':statepkid, 'region':regionpkid}, function(data) { 
      $(".load_more").show(); 
      $('.animation_image').hide(); 
      $("#results").append(data); 
      $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500); 
      $('.animation_image').hide(); 
      track_click++; 
     }).fail(function(xhr, ajaxOptions, thrownError) { 
      alert(thrownError); 
      $(".load_more").show(); 
      $('.animation_image').hide(); 
     }); 
     if(track_click >= total_pages-1)number 
     { $(".load_more").attr("disabled", "disabled"); } 
    } 
    }); 
}); 
</script>

來源

2016-04-04 K Ahir

只有當文件準備就緒時，其中的任何內容纔會顯示。因此，您可以在要加載的頁面中添加圖像，然後在準備好文檔時，只需使用innerhtml重新編寫新內容即可。一旦準備就緒，它將用實際的數據替換你的圖像。 – MadeInDreams

madeindreams是正確的，這是最簡單的方法，如果你想在10個結果後隱藏圖像，那麼在此時帶上10個結果，並將代碼中的順序改爲：'$（「＃results」）。append（data） ; $（'。animation_image'）。hide（）;'只有在實際加載後圖像纔會消失！ –

@MadeInDreams，Ty爲您的回覆...請您詳細說明一下詳情，以便我能夠理解並在此進行必要的更改。 –

我的答案是基於@MadeInDreams

提供幫助

的Javascript（帶有註釋行添加到解決問題）由於您使用的document.ready

<script type="text/javascript"> 

$('.animation_image').show(); // show loading image initially when no data are loaded on page 

$(document).ready(function() { 
var track_click = 0; 
var total_pages = <?php echo $total_review_pages; ?>; 
var statepkid = <?php echo $int_statepkid; ?>; 
var regionpkid = <?php echo $int_regionpkid; ?>; 
$('#results').load("fetch_page.php", {'page':track_click, 'state':statepkid, 'region':regionpkid}, 
function() { 
    track_click++; 
    $('.animation_image').hide(); // Hide loading image when data are loaded initially 
}); 

$(".load_more").click(function (e) { 
    $(this).hide(); 
    $('.animation_image').show(); 
    if(track_click <= total_pages) 
    { 
     $.post('fetch_pages.php',{'page': track_click, 'state':statepkid, 'region':regionpkid}, function(data) { 
      $(".load_more").show(); 
      $('.animation_image').hide(); 
      $("#results").append(data); 
      $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500); 
      $('.animation_image').hide(); 
      track_click++; 
     }).fail(function(xhr, ajaxOptions, thrownError) { 
      alert(thrownError); 
      $(".load_more").show(); 
      $('.animation_image').hide(); 
     }); 
     if(track_click >= total_pages-1)number 
     { $(".load_more").attr("disabled", "disabled"); } 
    } 
    }); 
}); 
</script>

HTML

<div class="animation_image"><img src="../images/ajax-loader.gif"> Loading...</div>

來源

2016-04-06 05:26:05

的快速簡便的方法，因爲你靠CSS類

會發現顯示在你的頁面的圖像容器要做到這一點，你的情況。您可以使用鉻檢查（右擊頁面，檢查）並使用選擇元素工具（方形中的箭頭，左上角），然後選擇元素或只是以明碼形式創建它（=

我相信它可以.animation_image，這是一個CSS類名，因爲它以點開始。所以，你的Jquery指的是類中的任何元素。

<html class="my-css-class"></html>

所以只需要創建一個簡單的CSS類

.my-css-class { 
    background-image: url("loader.gif"); 
}

你想要選擇或創建的元素在你的頁面上默認有這個類。所以當初始頁面加載時，你也可以使用jquery將其刪除。

$("#elementById").removeClass('my-css-class');

此查詢將刪除該css類;

由於您現在有相同元素的許多類，並且您將刪除並添加它們，所以按ID調用元素將是明智的。

我不知道你是餵養這個元素用，但你使用

$("#results").append(data);

這意味着你以後有什麼是已經存在於#result插入數據。

所以只需使用CSS技巧或者.append使用.html這將刪除該元素中的任何內容並將其替換爲數據。這將刪除以前的數據。

但我注意到你也使用PHP，所以你可以玩在服務器端的結果，但你的圖像請求會變得更大，每次。 CSS技巧可能是您的最佳選擇。

但是由於你在背景上加載了某些東西，它不會被看到，所以你只需要一個默認的背景就可以了，直到覆蓋它爲止。

來源

2016-04-06 00:38:17 MadeInDreams

Ty，這真的很有幫助答案...你可以請我回答一件事。在PHP中，我怎麼知道這個javascript代碼（$（'＃results'）.load（「fetch_page.php」，{'page'：track_click，'state'：statepkid，'region'：regionpkid}，function（） {track_click ++;}）; ）被加載？ –

那麼它的一個帖子，得到治療與PHP。所以fetch.page.php是包含數據的頁面。只需用回聲'它的工作'替換它;所以，當你加載你的頁面，看到它的工作，你知道PHP正在工作。 – MadeInDreams

僅當未加載初始數據時才顯示加載gif頁

回答

相關問題