Подгрузка картинок с lazy load не работает
 

Доброго вечера. Помогите решить одну проблемку.

У меня на сайте блок комментариев переключается с помощью ajax. На аватарах стоит "ленивая загрузка изображений" и всё работает как надо, за исключением этой самой переключалки. На второй странице комментариев lazy load уже не работает и аватары не отображаются.

ссылка на сайт, переключалка комментариев в самом низу


Пыталась сделать так, чтобы при нажатии на ссылку-навигацию комментариев аватарам присваивались адреса из data-original в src, но ничего не вышло :с

$('body').on('click','a.swchItem',function()
{
$('html,body').animate({scrollTop: $('.com-order-block').offset().top},500);
$('img.ava').load(function() 
{
$("img.lazy").each(function()
{
$(this).attr("src",$(this).attr("data-original"));
});
});
});

Было бы прекрасно, помоги вы мне понять, как сделать lazy load для подгружаемых картинок или хотя бы присвоить им src вместо data-original. Спасибо.

У вас построчная навигация получает данные асинхронным запросом, а значит данные комментариев следующих за первой страниц на страницу добавляются динамически, и действие плагина lazy load на них не распространяется. Нужно в Ajax запросе навигатора, после получения данных заново инициализировать lazy load.

Nezumi.May,
Заново инициализировать можно так:

$(document).ajaxStop(function() {
    $('img.lazy').lazyload();
});

laimas, Rise,
Большое спасибо! Никак не могла найти эту штуку.

Nezumi.May,
все таки не стоит для инициализации использовать .ajaxStop(). Методы .ajaxStart() и .ajaxStop() глобальные, обработчики которых можно определить так:

$(document).on({
    ajaxStart: ....., //имя функции или функция, которая например запускает лоадер, которых может быть множество 
    ajaxStop: ......//имя функции или функция, которая например останавливает лоадер, которых может быть множество
});

В общем какие-то глобальные задачи. А обработчики для конкретной задачи лучше вместе прописать, чтобы не рыскать по коду.

Хотя конечно работать будет и так.

laimas, Я сделала так:

$('body').on('click','a.swchItem',function(){
 $('html,body').animate({scrollTop: $('.com-order-block').offset().top},500);

 $(document).ajaxStop(function() {
 $('img.lazy').lazyload();
});

 
});

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

Nezumi.May,
Неправильно, должно быть отдельно, а так у тебя с каждым кликом лишний обработчик добавляется.

$("img.lazy").show().lazyload({
	effect: "fadeIn"
});
$('body').on('click', 'a.swchItem', function () {
	$('html,body').animate({
		scrollTop: $('.com-order-block').offset().top
	}, 500);
});
$(document).ajaxStop(function () {
	$('img.lazy').lazyload({
		effect: "fadeIn"
	});
});

Можете подсказать, почему не получается подгрузить lazyload.
Ссылка на страницу: тык

В самом низу кнопка подгрузки материалов. Материалы выводятся, но изображения не отображаются, только серый фон. Как мне вывести изображения?

Код кнопки:

<input value="Показать ещё материалы" id="eweanime" type="submit"><div id="aponbs"></div>

Скрипт подгрузки:

$('body').on('click', 'input#eweanime', function () {
$(this).remove();
var apons = 12;
 for(i=7;i<apons+1;i++) {
 $('#aponbs').append('<div id="apods' + i + '"></div>');
 $('div[id="apods' + i + '"]').load('/board/0-'+i+'-10265-0-17 #apobd');
 };
});
$(document).ajaxStop(function () {
	$('img.lazy').lazyload({
		effect: "fadeIn"
	});
});