Плавна поява картинки на сторінці при загрузці

Стояла задача плавної зміни прозорості при загрузці картинки. Бо іноді, коли картинка дуже велика, то грузиться вона шматками, і це виглядає не дуже.

Робимо наступним чином.
1. Додаємо картинкам класс .no-load. Це не обов’язково, але мені хотілось більшого контроля над цим процесом, розуміти, до яких елементів сторінки я це приміняю.
2. Додаємо в стилі до цього класу нульову прозорість. А також додаємо класс .load з прозорістю 1:

.no-load {
  opacity: 0;
}
.load {
  opacity: 1;
}

3. Зразу після откриваючого тега body додаємо скрипт:

<script>
//onload images
  function onLoadImage(image) {
    for (let opacity = 0; opacity < 1; opacity = opacity + 0.1 ) {           
      setTimeout(
        function() { 
          image.style.opacity = opacity;
          if (opacity > 0.9) {
            image.classList.add("load");
          }
        }, 100
     )                       
    }
  }
</script>

4. Повертаємось до html і додаємо до картинок виконная нашої функції в onload:

<img src="img/icon.png" class="not-load" alt="..." onload="onLoadImage(this)">

В результаті після того как картинка загрузиться на сторінку вона плавно з’явиться завдяки зміні прозорості.