js ile tüm img taglerine "lazy" class ı ekledim ardından js ile tüm imglerdeki src yi data-src ye taşıyıp src yerine blank.webp olarak geçici resimi koydum ancak sonrasında sorun yaşadım

/* sorunsuz kısımlar */
var all_img = document.getElementsByTagName("img");
for (var i = 0; i < all_img.length; i++){
      all_img[i].classList.add("lazy");
}


var imgEl = document.getElementsByTagName('img');
for (var i=0; i<imgEl.length; i++) {
    if(imgEl[i].getAttribute('src')){
        imgEl[i].setAttribute('data-src', imgEl[i].getAttribute('src'));
        imgEl[i].setAttribute('src', '/assets/img/blank.webp');
    }
}

sorun yaşadığım nokta: öncelikle head arasına eklememe rağmen sayfa yüklenmeden geçici resim asıl resimlerle yer değiştirmiyo, o arada zaten resmi yüklemiş oluyor bunu nasıl düzeltebilirim ve ekranda en üstteyken direkt orjinal resmi, alt kısımlar için ekran oraya gelince asıl resmi göstermesini nasıl sağlarım bi yerde çalışan kod buldum ama üsttekilere ek olarak yazdığımda önce orjinal resim yüklendi sonra geçici resim gözüktü ve en üstteyken sayfayı hiç aşağı kaydırmayınca header ve sliderdaki resimler geçici resimde kalıyor, ilk açılış ekranı orjinal resimle başlamıyor bunu nasıl sağlarım

denediğim kod;

document.addEventListener("DOMContentLoaded", function() {  var lazyloadImages = document.querySelectorAll("img.lazy");      var lazyloadThrottleTimeout;    function lazyload () {    if(lazyloadThrottleTimeout) {      clearTimeout(lazyloadThrottleTimeout);    }            lazyloadThrottleTimeout = setTimeout(function() {        var scrollTop = window.pageYOffset;        lazyloadImages.forEach(function(img) {            if(img.offsetTop < (window.innerHeight + scrollTop)) {              img.src = img.dataset.src;              img.classList.remove('lazy');            }        });        if(lazyloadImages.length == 0) {           document.removeEventListener("scroll", lazyload);          window.removeEventListener("resize", lazyload);          window.removeEventListener("orientationChange", lazyload);        }    }, 20);  }    document.addEventListener("scroll", lazyload);  window.addEventListener("resize", lazyload);  window.addEventListener("orientationChange", lazyload); });