Как сделать подобное последовательное появление элементов?

Question

[b_efimenko]

Вот как в этом примере, что бы по одному, с такой же задержкой, а не все сразу...и нужно что бы они появлялись именно при прокрутке....
Вроде бы, когда то видел плагин подобный, но не могу найти.
Кто поможем, буду благодарен.
ruseller.com/lessons/les1637/demo/index.html

Answer 1

[IceJOKER]

jQuery Lazy Load Plugin - поищите , думаю это то, что вам нужно

Comments

[b_efimenko]

ну я так понял он только для картинок, а если любой другой блок?

[IceJOKER]

b_efimenko: тогда введите запросы - "jquery lazy load content", "jQUery infinite scroll"

[b_efimenko]

IceJOKER: ну вот нашел что то подобное ressio.github.io/lazy-load-xt/demo/fadein.htm , но все равно они появляются не друг за другом, как на приведенной ссылке в самом начале, нету задержки между ними...

[IceJOKER]

b_efimenko: если в начале нужна задержка, то запускайте через setTimeout() с задержкой на сколько (мили)секунд надо, мне что ли за вас это сделать?
ruseller.com/lessons.php?rub=37&id=1637 - у вас уже есть то, что вам нужно

[b_efimenko]

IceJOKER: та не в самом начале. Между их появлением, как здесь: ruseller.com/lessons.php?rub=37&id=1637 есть задержка, тоже нужно и мне.
Код то там понятен, в две строки, но как сделать так что бы он работал при прокрутке?...
$(function() {
$('elements').each(function(i) {
$(this).delay((i++) * 500).fadeTo(1000, 1); })
});
Я не прошу за меня это делать, просто не знаю как сделать что бы этот код работал при прокрутке.
Прошу прощение если отвлекаю.

[IceJOKER]

b_efimenko: jscroll - динамически добавляете контент при прокручивании, а после добавления запускаете код плавного появления с - ruseller.com/lessons.php?rub=37&id=1637 , и все(конечно добавленные данные сразу не должны отображаться, а должны быть невидимы)

Answer 2

[arab789]

Выставляете всем изображениям display:none; Затем с помощью библиотеки jquery создаете функцию js для проявления изображения, например:

function fadeInImg_1(){
$('#img_1').fadeIn('slow');
}

Затем вещаем обработчик скрола и выставляем в какой интревал вызывать функцию:

$(document).scroll(function(){
            if ($(this).scrollTop() >= 0 && $(this).scrollTop() < 1140){
               fadeInImg_1();
            }
        });

Интервал в пикселях.

Comments

[b_efimenko]

опять же таки, если изображения будут в одном ряду, то при скроле они появятся одновременно, а нужно что бы появлялись друг за другом, как в приведенном примере.

Answer 3

[Глюкъ Виртуален]

Обратите внимание: если вы рассматриваете этот прием в контексте оптимизации нагрузки на сервер и/или канал — у вас ничего не выйдет.

Comments

[jlekapb]

Почему?

[Глюкъ Виртуален]

jlekapb: потому что здесь только последовательный показ элементов, но не вытягивание их из базы, насколько я понимаю.

[jlekapb]

Глюкъ: ок, я понял вашу мысль.
Просто если изображений много, то те, что не помещаются на первом экране, можно заменить заглушками и подгружать частями, тогда можно выиграть на скорости загрузки.

Answer 4

[jlekapb]

Пример с блоками: jsfiddle.net/lkp_chg/sLbdkpye

JS код из вашего примера ruseller.com/lessons/les1637/demo/index.html:

$(function() { 
	$('div#fds img').each(function(i) {
    $(this).delay((i++) * 500).fadeTo(1000, 1); })
});

Comments

[b_efimenko]

Та я что по вашему кода не видел?)
нужно что бы такое же при прокрутки происходило.

[jlekapb]

b_efimenko: jsfiddle.net/lkp_chg/sLbdkpye

[b_efimenko]

jlekapb: за ответ конечно спасибо, но к каждому ответу пишу, что нужно задержка между каждым появлением, как на примере...,а тут они все появляются сразу,а не по одному....
картинки не сразу появляются, а друг за другом с интервалом в полсекунды....
есть идеи как такое реализовать?