<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="postArea" id="feed-content2"></div>
<div id="loading" style="display: none; text-align: center;"><img src="<?php echo $url; ?>/images/loader.gif" style="width: 40px"><br>Yükleniyor</div>
<script>
var page = 1; // Başlangıçta page değeri 1 olarak ayarlanır
var isLoading = false; // Yükleme işlemi devam ediyor mu?
// BU İLK İSTEĞİ YAPAR, BÖYLECE İLK POSTLAR GELMİŞ OLUR
$.ajax({
url: '<?php echo $url; ?>/includes/fetch_posts_feed_nologin.php?page=' + page,
type: 'GET',
beforeSend: function() {
$('#loading').show(); // İstek başlamadan önce loading div'ini göster
},
success: function(data) {
if (data.trim() === "null") {
// Yeni veri yoksa kullanıcıya bildir
$('#loading').html("Tüm gönderilere baktınız, yeni gönderiler için <a href='<?php echo $url ?>/discover/' style='color: white;'><b>keşfet'ten</b></a> yeni kullanıcıları takip edin.");
} else {
$('#feed-content2').append(data); // Yeni veriler eklenir
page++; // page değeri artırılır
$('#loading').hide(); // Yükleme göstergesini gizle
}
},
error: function(xhr, status, error) {
console.error('AJAX hatası:', status, error);
},
complete: function() {
$('#loading').hide(); // İstek tamamlandığında loading div'ini gizle
}
});
// BU DİĞER İSTEKLERİ YAPAR, BÖYLECE KAYDIRDIKÇA DİĞER POSTLAR GELMİŞ OLUR
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100 && !isLoading) {
isLoading = true; // Yükleme başladı
$('#loading').show(); // Yükleme göstergesini göster
console.log('Sayfa aşağı kaydırıldı, yeni veriler yükleniyor...');
// AJAX isteği yap
$.ajax({
url: '<?php echo $url; ?>/includes/fetch_posts_feed_nologin.php?page=' + page,
type: 'GET',
success: function(data) {
if (data.trim() === "null") {
// Yeni veri yoksa kullanıcıya bildir
$('#loading').html("Tüm gönderilere baktınız, yeni gönderiler için <a href='<?php echo $url ?>/discover/' style='color: white;'><b>keşfet'ten</b></a> yeni kullanıcıları takip edin.");
} else {
$('#feed-content2').append(data); // Yeni veriler eklenir
page++; // page değeri artırılır
$('#loading').hide(); // Yükleme göstergesini gizle
console.log('Yeni veriler başarıyla yüklendi.');
}
isLoading = false; // Yükleme tamamlandı
},
error: function(xhr, status, error) {
console.error('AJAX hatası:', status, error);
isLoading = false; // Yükleme tamamlandı
$('#loading').hide(); // Yükleme göstergesini gizle
}
});
}
});
</script>İstediğim aksiyon: Sadece sayfanın sonuna geldiğimde veya sayfanın sonuna çok yaklaşıldığında tetiklenmesini istiyorum ama şuan minicik biraz bile kaydırsam yeni postlar geliyor. Şimdiden cevap veren herkese teşekkür ederim.Not: İlk js kodu başarıyla çalışıyor ve isteğimi yerime getiriyor, sorunum ikinci js kodumda.
