LazyLoad nasıl yapılır?
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.
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ı