Question

I want to display loading GIF only when initial records are not loaded on page (for example 10 records per page). I want loading GIF to disappear once initial 10 records are loaded on page. I have tried below piece of code but it is working partially. It displays loading GIF when initial records are not loaded on page but it is not disappeared automatically when 10 initial records are loaded/displayed on page. Once load more button is pressed to load more records, loading GIF disappeared automatically so that part is working fine.

Please let me know if I have not explained properly.

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

Below is entire code.

<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>

Answer 1

由于您依赖CSS类

，因此在您的情况下快速简便地执行此操作

将找到显示页面中图像的容器。您可以使用chrome检查（右键单击页面，检查）并使用选择元素工具（方框中的箭头，左上角）然后选择元素或者只是用普通代码创建它（=

我相信它可能是.animation_image。这是一个CSS类名，因为它以点开头。所以你的Jquery引用该类的任何元素。

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

所以只需创建一个简单的css类

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

您希望您选择或创建的元素默认在您的页面上具有此类。因此，当初始页面加载 Jquery document.ready时，您也可以使用jquery删除它。

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

此查询将删除该css类;

由于您现在有相同元素的许多类，并且您将删除并添加它们，因此通过ID调用元素是明智的。

我不知道你用这个元素喂养了什么，但你使用

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

这意味着您在已经存在的数据之后在#result中插入数据。

所以只需使用CSS技巧或代替.append使用.html这将删除该元素中的任何内容并将其替换为数据。这将删除以前的数据。

但我注意到你也使用PHP，所以你可以在服务器端玩结果，但每次你的图像请求会变大。 CSS技巧可能是你的最佳选择。

但是，因为你在背景上加载某些内容，所以它不会被显示，所以你可能只使用默认背景就可以了，直到覆盖它为止。

Answer 2

我的回答是基于@MadeInDreams提供的帮助

Javascript（添加了评论行以解决问题）

<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>

Want to display loading gif only when initial data are not loaded on page

2 个答案: