Показ изображений после полной загрузки
 

Добрый день. Есть разметка:

<div class="content">
	<a href="https://images.unsplash.com/photo-1430651717504-ebb9e3e6795e"><img src="https://images.unsplash.com/photo-1430651717504-ebb9e3e6795e?auto=compress&fit=crop&w=224&q=40" /></a>
	<a href="https://images.unsplash.com/photo-1458400411386-5ae465c4e57e"><img src="https://images.unsplash.com/photo-1458400411386-5ae465c4e57e?auto=compress&fit=crop&w=224&q=40" /></a>
</div>

В атрибуте src указывается путь к миниатюре изображения. В атрибуте href ссылка на полное изображение.
При клике по изображению открывается модальное окно в которое подгружается полное изображение. Однако, в данный момент из-за скорости интрнета делает это полосками. Как показывать в модальном окне изображение после его полной загрузки?

<a href="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="modalImg">картинка</a>
<a href="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="modalImg">картинка2</a>
  <div id="modal" style="display:none;"></div>
  <script>

    document.querySelectorAll('a.modalImg').forEach(function (el) {
      el.onclick = function (e) {
        e.preventDefault();
        var img = new Image();
        img.src = this.href;
        img.onload = function () {
          modal.appendChild(img);
          modal.style.display = 'block';
        };
      };
    });

  </script>

принцип такой, при закрытии удаляете img

или же в блоке modal создайте постоянный img и в обработчике onload меняйте src