Scrolla Göre Lazy Page Load Nedir ve Nasıl Uygulanır?
JQuery ile scrolla göre "lazy page load" (tembel sayfa yükleme), bir web sayfasında kullanıcı sayfayı aşağıya doğru kaydırdığında, sayfanın daha fazla içeriğini dinamik olarak yüklemek için kullanılan bir tekniktir. Bu, kullanıcının tüm içeriği bir seferde yüklemek yerine, sayfanın alt kısmına kadar ilerledikçe içeriğin yüklendiği daha verimli bir yöntemdir. Böylece, sayfa yükleme süresi ve yüklenen veri miktarı azalır, kullanıcı deneyimi iyileştirilir ve kullanıcıya sonsuz sayfa izlemlnimi veririlir.
JQuery kullanarak scrolla göre lazy page load yapmak için aşağıdaki adımları izleyebilirsiniz:
- JQuery Kütüphanesini Ekleme: İlk olarak, JQuery kütüphanesini HTML dosyanıza ekleyin. Bu işlem için CDN veya yerel bir dosya kullanabilirsiniz. Örneğin:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
- Scroll Olayını Dinleme: JQuery kullanarak, kullanıcının sayfayı aşağıya doğru kaydırdığını dinlemek için
scrollolayını kullanın. Örneğin:
$(window).scroll(function() { // Scroll olayı gerçekleştiğinde yapılacak işlemler burada yer alır
});
- Scroll Pozisyonunu Kontrol Etme: Scroll olayı gerçekleştiğinde, sayfanın alt kısmına ulaşıldığını kontrol etmek için scroll pozisyonunu ve sayfa yüksekliğini kontrol edin. Örneğin:
var windowHeight = $(window).height(); // Pencere yüksekliği
var documentHeight = $(document).height(); // Sayfa yüksekliği
var scrollTop = $(window).scrollTop(); // Scroll pozisyonu
if (windowHeight + scrollTop >= documentHeight) {
// Sayfanın altına ulaşıldığında yapılacak işlemler burada yer alır
}
- İçerik Yükleme İşlemi: Sayfanın alt kısmına ulaşıldığında, yeni içeriği yüklemek için gerekli AJAX isteğini gönderin ve sayfaya ekleyin. Örneğin:
if (windowHeight + scrollTop >= documentHeight) {
$.ajax({
url: 'yeni-icerik-getir.php', // Yeni içeriği getiren URL
type: 'GET',
dataType: 'html',
success: function(response) { // AJAX isteği başarılı olduğunda yapılacak işlemler burada yer alır
$('#content').append(response); // Yeni içeriği sayfaya ekleme
}
});
}
Yukarıdaki adımları izleyerek, JQuery kullanarak scrolla göre lazy page load işlevselliğini uygulayabilirsiniz. documentHeight değerini (documentHeight-200) gibi bir hesaplama ile hesaplayıp kontrole çıkan sonucu sorarsanız kullanıcı sayfa altına henüz inmeden yükleme yapılmış olur ve brkleme süresi minimum a indirilmiş olur. Kullanıcıya bu sayede sonsuz sayfa izlenimi verilir. Bu yöntem, kullanıcı deneyimini artırırken sayfa yükleme performansını iyileştirir.
Alakalı İçerikler
-
Bun Nedir? Node.js’e Göre Avantajları, Dezavantajları ve Aralarındaki Farklar 8 Ay önce
JavaScript ekosistemi son yıllarda inanılmaz bir hızla gelişiyor. Uzun yıllardır sunucu tarafı JavaScript için standart haline gelen Node.js, artık tek seçenek olmaktan çıkmaya başladı. Bu alternatiflerin en güçlüsü ise hiç şüphesiz Bun.
-
Dexie - Tarayıcı Tabanlı Veritabanı (IndexedDB) İşlemleri için Kolay Bir Araç 2 Yıl önce
Dexie, tarayıcı tabanlı uygulamalar için IndexedDB üzerinde veritabanı işlemlerini kolaylaştıran JavaScript kütüphanesidir. Basit kurulumu ve kullanımı sayesinde, geliştiriciler veritabanı işlemleriyle ilgili karmaşıklığı azaltır ve daha verimli uygulamalar oluşturmanızı sağlar.
-
JavaScript ile Web Depolama - IndexedDB, Local Stage, Cache API ve Cookie 2 Yıl önce
JavaScript dünyasında veri depolama konusu oldukça zahmetli ve performans için önemli olan etkenlerden birisidir. Bu noktada IndexedDB, Local Stage ve Cookie gibi yöntemleri kullanarak veri saklayabilir silebilir ve okuyabiliriz. Peki nasıl ?
-
JavaScript asenkron programlamada Callback ve Promise Farkları 2 Yıl önce
JavaScript'te asenkron programlamada kullanılan iki temel yaklaşım olan Callback ve Promise, işlemleri yönetme ve kontrol etme konusunda önemli farklılıklara sahiptir.
-
JavaScript'te Promise Kullanımı Asenkron Programlamada Devrim Niteliğinde Bir Yöntem 2 Yıl önce
Asenkron programlamada başarılı bir şekilde başa çıkabilmek için JavaScript geliştiricileri, Promise'leri kullanmaya başladılar.
-
AJAX ve Axios Asenkron İletişimde Devrim Niteliğinde Teknolojiler 2 Yıl önce
Web geliştirmenin dinamik ve etkileşimli hale gelmesinde büyük bir rol oynayan AJAX ve Axios, asenkron veri alışverişini mümkün kılan teknolojilerdir.
- Jquery
- Web Yazılım
- Javascript
Tepkini Göster
- 2
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
Yorumlar
Sende Yorumunu Ekle