Подгрузка фоток на странице сайта по мере загрузки?

Question

[keslo]

Добрый день, господа.
На одном сайте (www.codered.ru) понравилась подгрузка фоток по мере прокрутки страницы пользователем. Подскажите как такое реализовать?

Answer 1

[Евгений Попов]

Такое реализуется достаточно просто. Есть даже готовые решения. Если говорить о принципе, то на ресайз и скролл вешается отслеживание текущей "области видимости страницы" и входит ли в нее весь контент. Далее простая математика: считаем офсет и высоту элементов в блоках с подгружаемым контентом все что равны либо меньше размера окна - начинаем загружать. Далее по мере скроллинга или ресайза подгружаем и остальные.
Для подробностей следует начать с "бесконечного скроллинга", а так же если именно подгрузка картинок, то просто уточняем предыдущий запрос, например так

Answer 2

[Jonh Doe]

Посмотрите как это реализованно тут applejesus.ru

Вот кусок

$(window).scroll(function () {
		$('.container > li > article').each(function() {
			if (!$(this).hasClass('animate')) {
				if (($(this).position().top - $(window).height() * 3 / 4) < $(window).scrollTop()) {
					$curItem = $(this);
					$curItem.addClass('animate');
					//setTimeout(function() {$curItem.animate({opacity: 1}, 400); }, 500);
					$curItem.animate({opacity: 1}, 300);
					if ($curItem.parents('li').hasClass('pre_cancel')) {
						$curItem.parents('li').attr('class', 'cancel');
					}
				}
			}
		});
	});