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

Связь: dmitriyzhuravlev@yandex.ru

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

Скрипт не грузит процессор постоянной проверкой, а срабатывает с короткой задержкой после события 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;}
Раздел: JavaScript

Комментарии
(из-за чертовых спамеров урлы в коментах теперь писать нельзя)

Имя:

 
Комментарий:

 

Антиспам. Сколько будет двадцать минус десяточка?
Напишите только число:




Комментариев нет