v2.5.2
Giriş yap

LazyLoad nasıl yapılır?

erkamalper
586 defa görüntülendi ve 1 kişi tarafından değerlendirildi

Merhaba, lazyload konusunda birkaç sorum var;

  • LazyLoad nasıl yapılır?
  • Kütüphane kullanmadan yapılabilir mi?
    • Yapılırsa örnekleri nelerdir?
    • Yapılamazsa hangi kütüphane kullanılmalıdır?
  • Front-end'den back-end'e istek atmak zorunlu mudur?

Cevaplarınız için şimdiden teşekkür ederim.

batuhanal
1051 gün önce
const lazy = function(features,seen,unseen){
  if(document.querySelectorAll(features.elements).length >= 1){
    let scrollWindow = {}; 
    if(features.top == (false||null||undefined)) features.top=0;
    if(features.bottom == (false||null||undefined)) features.bottom=0;
    if(features.screenHeight == (false||null||undefined)) features.screenHeight=window.outerHeight;
    if(features.deletevisibilyonly == (false||null||undefined)) features.deletevisibilyonly=0;
    let elementsDel = [...document.querySelectorAll(features.elements)];
    window.addEventListener('scroll',function(){
      scrollWindow.scrollTop = this.scrollY;
      scrollWindow.scrollScreenBottom = (this.scrollY-features.bottom+features.screenHeight);
      scrollWindow.scrollScreenTop = (this.scrollY+features.top);
      elementsDel.forEach((e,veindex)=>{
        const offsetTopPos = e.offsetTop;
        const calculateTopE = [
          getComputedStyle(e)['box-sizing'] !== 'border-box' ? (parseFloat(offsetTopPos,10)+(parseFloat(getComputedStyle(e)['padding-top'].match(/[0-9]+/)[0],10)+parseFloat(getComputedStyle(e)['padding-bottom'].match(/[0-9]+/)[0],10)))+parseFloat(getComputedStyle(e)['height'].match(/[0-9]+/)[0],10): parseFloat(offsetTopPos,10)+parseFloat(getComputedStyle(e)['height'].match(/[0-9]+/)[0],10),
          parseFloat(offsetTopPos,10)-parseFloat(getComputedStyle(e)['padding-top'].match(/[0-9]+/)[0],10)+parseFloat(getComputedStyle(e)['padding-bottom'].match(/[0-9]+/)[0],10)
        ]; 
        if(features.hasOwnProperty('yields') && features.yields.toLowerCase() == 'normal'){
          if((calculateTopE[0] > scrollWindow.scrollScreenTop) && (calculateTopE[1] < scrollWindow.scrollScreenBottom)){
            seen ? seen(e): null;
            if(features.deletevisibilyonly === 1){
              delete elementsDel[veindex]; 
            }
          }else{
            unseen ? unseen(e): null;
          }
        }else{          
          if((calculateTopE[0] > scrollWindow.scrollScreenTop) && (calculateTopE[0] < scrollWindow.scrollScreenBottom)){
            seen ? seen(e): null;
            if(features.deletevisibilyonly === 1){
              delete elementsDel[veindex]; 
            }
          }else{
            unseen ? unseen(e): null;
          }
        }
      });
    }); 
  }else{
    throw 'Element is not html tag'
  }
}



lazy({elements:'her bir eleman .class #id tagname',yields:'normal||null',screenHeight: boş ise ekran yüksekligi veya istediginiz bir yükseklik px cinsinden, deletevisibilyonly:1(görünen eleman silinir ve bidaha kontrol edilmez) veya 0(görünen eleman yine kontrol edilmeye devam eder),bottom(elemanlar aşağıda buraya denk gelirse): 40,top(eleman yukaridan denk gelme yüksekliği):0},function(e(eleman)){
  //her görünen eleman buraya gelir
},function(e(eleman)){
  // görünmeyen tüm elemanlar için çalıştırılacak fonksiyon
});


Şimdiden Söyleyeyim Pek Sağlıklı bir yöntem degil bence ama kullanışlı