CodePen Embed - lazy-load image demo

<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);
}

let images = document.querySelectorAll(".lazyload");
lazyload(images);

This Pen is owned by Nick on CodePen.

See more by @Nick0603 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js