Scrolla Göre Lazy Page Load Nedir ve Nasıl Uygulanır?

519

17 Şubat 2024 Cumartesi - 03:03 (9 Ay önce)

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 scroll olayı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.

Jquery
Web Yazılım
Javascript

Tepkini Göster

Yorumlar

Sende Yorumunu Ekle

0 karakter