仅当未加载初始数据时才显示加载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页

回答

相关问题