Kaizokupuffball
Kaizokupuffball

Reputation: 2833

Jquery infinite scroll loading all the time

I can't see what i am doing wrong. But the code i use to load more images when scrolling won't work correctly. The ajax request works perfect, but i have big problems with the code loading images all the time when i just touch my scroll. I want it load new images when i get to the bottom of the page, not load everytime i touch the scroll.

The code:

<script type="text/javascript">
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() >= $(document).height() -300) {

            $('div#more').show();
            $.ajax({
                url: "more.php?last=" + $('.fap:last').attr('id'),
                success: function(html) {
                    if (html) {
                        $('#photos').append(html);
                        $('div#more').hide();
                    }
                    else {
                        $('div#more').replaceWith('<center>No more images</center>')
                    }
                }
            });
        }
    });
</script>

Any one knows how i can fix this?

Upvotes: 0

Views: 1778

Answers (1)

Stano
Stano

Reputation: 8939

Maybe one signalization variable could do it:

var is_loading = false;
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() >= $(document).height() -300) {
        if (is_loading) {
            return;
        }
        is_loading = true;
        $('div#more').show();
        $.ajax({
            url: "more.php?last=" + $('.fap:last').attr('id'),
            success: function(html) {
                if (html) {
                    $('#photos').append(html);
                    $('div#more').hide();
                }
                else {
                    $('div#more').replaceWith('<center>No more images</center>')
                }
            }
        }).always(function() { is_loading = false; });
    }
});

Upvotes: 3

Related Questions