Скрипт не грузит процессор постоянной проверкой, а срабатывает с короткой задержкой после события 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;}
(из-за чертовых спамеров урлы в коментах теперь писать нельзя)
Комментариев нет