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ı

  // tipi file olan inputu seçtik

  let images = document.getElementById('dosyalar');
  const limit = 10;
  if(images.files.length > limit){
    images = {this:this,files:[...images.files].slice(0,limit)};
    //ilk 10 veriyi aldık bunu almadanda yaparsin. yeniden sectirerek
  }else{
    //10'dan küçükse
  }

Php Tarafındada kontrol yaptır.

<button class="herhangi">like</button>
<button class="herhangi">unlike</button>

//.passive yerine iki button'a ayni classı vermeyi dene eger böyle değilse
        //.passive yerine iki button'a ayni classı vermeyi dene eger böyle değilse
    [...document.querySelectorAll(".herhangi")].forEach(e=>{
      e.addEventListener('click', function() {
        [...document.querySelectorAll(".herhangi")].forEach(f=>{
          f.classList.add("passive");
          f.classList.remove("active");
        })
          
        this.classList.add("active");
        this.classList.remove("passive");
        
      });
    })
    //