Для связи: dmitriyzhuravlev (гав-гав) yandex.ru

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


Мой ЖЖ: dimadima.livejournal.com — там дубль, плюс коментов больше.

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

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

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

Имя:

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

 



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