Как показывать несколько элементов при скролле вниз?

Question

[ld0687]

Добрый день!

Есть страница с большим количеством фотографий, расположенных в сетке.

<div class="item">
  <div class="image">
    <img src="1.jpg" alt=""/>
  </div>
</div>
..и т.д.

Фото может быть много (допустим, тысяча), и не всегда пользователю (и браузеру) обязательно загружать их все.
Предполагаю, что какое то количество фото (например, 100) будет загружаться всегда, а остальные будут открываться блоками по 50 штук, когда пользователь будет скроллить до них.
Вот только никак не соображу как это реализовать.
Прошу подсказки.

Answer 1

[Дмитрий Соколов]

Ленивая загрузка изображений
Подключаешь после jQuery - https://raw.githubusercontent.com/ressio/lazy-load...
А изображениям вместо src="путь до изображения" прописываешь data-src="путь до изображения"

Comments

[ld0687]

Я искал решение вроде этого, но вы подсказали еще более крутую вещь, спасибо!

$(window).scroll(function() {

	if(($(document).height() - $(window).scrollTop()) < 1000 ) {
		let cards = $('div.cardblock.hidden-field');
		if(cards.length == 0)
			return;
		$.each(cards, function (k, v) {
			if (k < 36)
				$(this).removeClass('hidden-field');
			else
				return;
		})
	}
});

Answer 2

[Дима Долготер]

lazyload гугли.