let lazyLoadByDefault = function (imgs) {
var H = document.documentElement.clientHeight;
var S = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i < imgs.length; i++) {
var rect = imgs[i].getBoundingClientRect();
if (rect.top <= H) {
if (imgs[i].getAttribute("data-loading") == "lazy" && imgs[i].getAttribute("data-src")) {
let src = decodeURI(imgs[i].getAttribute("data-src"));
imgs[i].src = src;
imgs[i].removeAttribute("data-loading");
console.log(new Date(), src);
}
}
}
};
window.onload = window.onscroll = function () {
var imgs = document.querySelectorAll("img");
lazyLoadByDefault(imgs);
};
<div>
<img src="../static/img/loading.gif" data-src="../static/img/test1.png" data-loading="lazy" alt="1" style="width: 100%;">
</div>
<div>
<img src="../static/img/loading.gif" data-src="../static/img/test2.png" data-loading="lazy" alt="1" style="width: 100%;">
</div>
<div>
<img src="../static/img/loading.gif" data-src="../static/img/test3.png" data-loading="lazy" alt="1" style="width: 100%;">
</div>
<div>
<img src="../static/img/loading.gif" data-src="../static/img/test4.png" data-loading="lazy" alt="1" style="width: 100%;">
</div>
<div>
<img src="../static/img/loading.gif" data-src="../static/img/test5.png" data-loading="lazy" alt="1" style="width: 100%;">
</div>