Reputation: 2833
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
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