Далеко не единственный, но имеющий право на жизнь, способ организации отложенной загрузки изображений.

В head добавляем:

<style> img { opacity: 1; transition: opacity 0.3s; } img[data-src] { opacity: 0; } </style>

<script>
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img)
{
    img.setAttribute('src', img.getAttribute('data-src'));
    img.onload = function() {
    img.removeAttribute('data-src');
    };
});
</script> 

И вместо <img src=> используем <img data-src=>. После выполнения скприпта параметр data-src будет заменен на src и браузер поймет о чем речь.

Можно <scritpt> убрать вниз, следуя популярным в настоящие время тенденциям.