Персональный сайт Дмитрия Журавлева

Мой короткий скрипт для показа (загрузки) картинок после их появления на экране. Изображения не будут загружаться, если до них не промотана страница. Соответственно, экономия трафика пользователя, экономия трафика сервера.

Скрипт не грузит процессор постоянной проверкой, а срабатывает с короткой задержкой после события scroll.

document.addEventListener('DOMContentLoaded', showNotShownImages);
document.addEventListener('scroll', runShowNotShownImages);
 
var imgs = document.getElementsByClassName('afterVisible');
 
var wasPlanned = false;
 
function showNotShownImages()
{
    for (var i = 0; i < imgs.length; i++)
    {
        // если верхушка img находится на экране
        if ( imgs[i].getBoundingClientRect().top >= 0 && imgs[i].getBoundingClientRect().top <= window.innerHeight )
        {
            if (!imgs[i].src) {imgs[i].src = imgs[i].dataset.src;}  
        }
    }
wasPlanned = false;
}
 
function runShowNotShownImages()
{
    if (!wasPlanned)
    {
        wasPlanned = true;
        console.log('старт таймера')
        setTimeout(showNotShownImages, 300);
    }
}

Ну и CSS для картинок, у которых не должно быть атрибута src, но должен быть атрибут data-src:

.afterVisible { max-width: 200px; border: 1px solid black; width: 100%; min-height: 10px;}