Приветствую.
Где-то в центре страницы по вертикали есть блок. В этом блоке изображения. И надо сделать так, чтобы при приближении (скролле) к этому блоку на расстояние <= 100 px, изображения бы появлялись. И как это сделать правильно — не осмыслю пока и прошу ваших советов.
Атрибут
src тега изображения отстутствует, пути изображений находятся в атрибуте
data-src. Создаю атрибут
src и добавляю в него путь из
data-src. Определение расстояния при прокрутке до блока, вроде, тоже понятно. Все это дело я сделал вот так, оно работает:
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop(),
elementOffset = $('.images-block').offset().top,
distance = (elementOffset - scrollTop);
console.log(distance)
if (distance <= 100) {
$('img').each(function () {
var dataSrc = $(this).attr('data-src');
$(this).attr('src', dataSrc);
$(this).removeAttr('data-src');
})
}
});
Но я почти уверен в том, что это какой-то неправильных подход, так как
$(window).on('scroll'...будет работать постоянно, даже если пути изображений уже подставлены. Можно прописать внутри условия
$(this).unbind() и тогда просчет прекратится, но тогда полностью остановится возможность использования
$(window).on('scroll',...
Ребята, подскажите правильный подход с примером!
