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ı

Asagida vermis oldugum ornekle resimleri lazy load olarak yukleyebilirsin

<img src="example.jpg" loading="lazy" />

O hâlde vanillaJs kullanıyorsan Observer API ile yapabilirsin. Zaten kütüphaneler de bu API'yi baz alarak yapılmışlar.
Tayfun hocanın böyle bir videosu var, örnekler ile de konuyu pekiştirmiş. Yani kütüphane kullanmadan da yapabilirsin.

Hocam, aradığım lazyload işlemi sadece resimler için olmayacak. Database'den aldığım veriyi lazyload ile yükletmem lazım.

Kütüphane kullanmadan şurda gösterildiği gibi çok kolay bir şekilde yapabilirsin. (yazıda sadece chrome ve opera demiş ama firefox da destekliyor artık)