Sayfa aşağı kaydıkça içerik yükleme - scroll paging (sayfalama)

Bu yazıda scroll aşağı kaydırıldığında içerik yükleme işlemini basit bir şekilde anlatmaya çalışacağım.

Çok fazla veriyi aynı anda çekerek ekrana basmak performans açısından sorun çıkarabilmekte. Bunu engellemek için kullanılan yöntemlerden bir tanesi de scroll'u kullanarak sayfalama yapmak.



1'den 18'e kadar olan sayıları yazılışlarıyla beraber ekrana yazdıracağım. Sayfa yüklendiğinde 1'den 9'a kadar olan sayıları, yüklendikçe de sıradaki 3 sayıyı (10,11,12 / 13,14,15 gibi) yazdıracağım.

body altına aşağıdaki gibi 9 sayıyı ekliyorum.

 <div id="items" class="col-xs-12 col-sm-8 col-sm-offset-2">  
      <div class="item col-xs-3">  
           <span class="letter">Bir</span>  
           <span class="number">1</span>  
      </div>  
      <div class="item col-xs-3">  
           <span class="letter">İki</span>  
           <span class="number">2</span>  
      </div>  
      <div class="item col-xs-3">  
           <span class="letter">Üç</span>  
           <span class="number">3</span>  
      </div>  
      <div class="item col-xs-3">  
           <span class="letter">Dört</span>  
           <span class="number">4</span>  
      </div>  
      <div class="item col-xs-3">  
           <span class="letter">Beş</span>  
           <span class="number">5</span>  
      </div>  
      <div class="item col-xs-3">  
           <span class="letter">Altı</span>  
           <span class="number">6</span>  
      </div>  
      <div class="item col-xs-3">  
           <span class="letter">Yedi</span>  
           <span class="number">7</span>  
      </div>  
      <div class="item col-xs-3">  
           <span class="letter">Sekiz</span>  
           <span class="number">8</span>  
      </div>  
      <div class="item col-xs-3">  
           <span class="letter">Dokuz</span>  
           <span class="number">9</span>  
      </div>  
 </div>  

Javascript tarafında üzerinde letter ve number olan listemi tanımlıyorum.

 var itemList = [  
      { letter: 'Bir', number: 1 },  
      { letter: 'İki', number: 2 },  
      { letter: 'Üç', number: 3 },  
      { letter: 'Dört', number: 4 },  
      { letter: 'Beş', number: 5 },  
      { letter: 'Altı', number: 6 },  
      { letter: 'Yedi', number: 7 },  
      { letter: 'Sekiz', number: 8 },  
      { letter: 'Dokuz', number: 9 },  
      { letter: 'On', number: 10 },  
      { letter: 'On bir', number: 11 },  
      { letter: 'On iki', number: 12 },  
      { letter: 'On üç', number: 13 },  
      { letter: 'On dört', number: 14 },  
      { letter: 'On beş', number: 15 },  
      { letter: 'On altı', number: 16 },  
      { letter: 'On yedi', number: 17 },  
      { letter: 'On sekiz', number: 18 },  
 ];  

Şimdi scroll'un en alta geldiğini bulmak için gerekli fonksiyonu yazıyorum. Her scroll'da 3 item çekmek istediğim için, oluşturmuş olduğum pageSize değerini 3 yaptım. lastPage değişkeninde ise item sayısını pageSize'a bölerek görüntülenen son sayfayı buldum. pageSize ve (lastPage + 1) değerleriyle GetNextPage fonksiyonunu çağırdım.

 $(window).scroll(function(){  
      if($(window).scrollTop() == $(document).height() - $(window).height()) {  
           var pageSize = 3;  
           var lastPage = $("#items").find(".item").length / pageSize;  
           GetNextPage(lastPage + 1, pageSize)  
      }  
 });  

GetNextPage fonksiyonunda son index'i bularak sonraki 3 ürünün çekilmesini sağladım.

 function GetNextPage (page, pageSize) {  
      var result = [];  
      var lastIndex = ((page - 1) * pageSize);  
      for(var i = lastIndex; i < (lastIndex + pagesize); i++) {  
           result.push(itemList[i]);  
      }  
      DrawNextPage(result);  
 }  

DrawNextPage fonksiyonunda ise dönen değerleri kullanarak html append işlemini gerçekleştirdim.

 function DrawNextPage (data) {  
      if(data != null && data.length > 0) {  
           var content = "";  
           for(var i = 0; i < data.length; i++) {  
                content += '<div class="item col-xs-3">';  
                content += '     <span class="letter">' + data[i].letter + '</span>';  
                content += '     <span class="number">' + data[i].number + '</span>';  
                content += '</div>';  
           }  
           $("#items").append(content);  
      }  

 }  
DEMO - DOSYALAR

If You Enjoyed This, Take 5 Seconds To Share It

• 
• 
• 
• 
• 
•