Lazy loading images with Intersection Observer

An easy example on how to use Intersection Observer API to lazy load images.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
      <img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/1x1_placeholder.png" data-src="https://previews.123rf.com/images/vikarus/vikarus1012/vikarus101200001/8445361-white-horse-runs-gallop.jpg" class="lazy">
    </div>
    <div class="col-12">
      <img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/1x1_placeholder.png" data-src="https://previews.123rf.com/images/maryart1/maryart11212/maryart1121200023/16829047-white-horse-in-sunset.jpg" class="lazy">
    </div>
    <div class="col-12">
      <img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/1x1_placeholder.png" data-src="https://camarilloranchfoundation.org/wp-content/uploads/2017/04/WhiteHorses-Running-1024x539.jpg" class="lazy">
    </div>
    <div class="col-12">
      <img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/1x1_placeholder.png" data-src="https://previews.123rf.com/images/konradbak/konradbak1311/konradbak131100001/23960847-majestic-photo-of-strong-royal-white-horse.jpg" class="lazy">
    </div>
    <div class="col-12">
      <img id="a" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8nj4WAB01lL-y2rw4pKQ81eo3MAo0kovZMozLaWbRWvR0C8qFBw" loading="lazy" >
    </div>
  </div>
</div>

CSS

.lazy {
  opacity: 0;
  width: 100%;
  height: 300px;
  object-fit: cover;
  -webkit-transition: opacity 2s ease-in;
       -moz-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
         -o-transition: opacity 2s ease-in;
            transition: opacity 2s ease-in;
}

.lazy.loaded {
  opacity: 1;
}

JavaScript

function loaded() {
  console.log('aaa')
}

document.getElementById('a').onload = function() {
  console.log('załadowano');

}