<img class="lazyload" data-src="https://fakeimg.pl/400x400/00B9AA/FFFFFF/?text=Image1" width=400 height=400>
<img class="lazyload" data-src="https://fakeimg.pl/400x400/0E3C57/FFFFFF/?text=Image2" width=400 height=400>
<img class="lazyload" data-src="https://fakeimg.pl/400x400/E8E1C4/FFFFFF/?text=Image3" width=400 height=400>
<img class="lazyload" data-src="https://fakeimg.pl/400x400/C1CFBE/FFFFFF/?text=Image4" width=400 height=400>
<img class="lazyload" data-src="https://fakeimg.pl/400x400/B57047/FFFFFF/?text=Image5" width=400 height=400>
<img class="lazyload" data-src="https://fakeimg.pl/400x400/00B9AA/FFFFFF/?text=Image6" width=400 height=400>
<img class="lazyload" data-src="https://fakeimg.pl/400x400/0E3C57/FFFFFF/?text=Image7" width=400 height=400>
<img class="lazyload" data-src="https://fakeimg.pl/400x400/E8E1C4/FFFFFF/?text=Image8" width=400 height=400>
<img class="lazyload" data-src="https://fakeimg.pl/400x400/C1CFBE/FFFFFF/?text=Image9" width=400 height=400>
<img class="lazyload" data-src="https://fakeimg.pl/400x400/B57047/FFFFFF/?text=Image10" width=400 height=400>
img{
  display: block;
  background-image: url(https://i.imgur.com/drbNXTS.gif);
}

const selector = ".lazyload";
const dataSrc = "data-src";
const observerConfig = {
    root: null,
    rootMargin: '0px',
    threshold: [0]
};

const callback = function(entries, selfObserver) {
    Array.prototype.forEach.call(entries, function (entry) {
        if (entry.isIntersecting) {
            selfObserver.unobserve(entry.target);
            let src = entry.target.getAttribute(dataSrc);
            if ("img" === entry.target.tagName.toLowerCase()) {
                if (src) {
                    entry.target.src = src;
                }
            }
        }
    });
}

let $images = document.querySelectorAll(selector);
let observer = new IntersectionObserver(callback, observerConfig);

Array.prototype.forEach.call($images, function (image) {
    observer.observe(image);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.